博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue 使用localstorage实现面包屑
阅读量:5015 次
发布时间:2019-06-12

本文共 1545 字,大约阅读时间需要 5 分钟。

mutation.js代码:
changeRoute(state, val) {        let routeList = state.routeList;        let isFind = false;        let findeIdex = 0;       //菜单栏和下拉的二级菜单        if (val['type'] == 'header' || val['type'] == 'secondHeader')     {            routeList.length = 0;            //顶级菜单清除缓存            localStorage.removeItem("routeList");        }        let routes = routeList;        let localStorageList = localStorage.getItem('routeList');        if (localStorageList) {            //当前页刷新,使用缓存数据            routes = JSON.parse(localStorageList as any);        }        //遍历是否有存入当前路由位置        for (let i = 0; i < routes.length; i++) {            isFind = routes[i]['name'] == val['name'];            if (isFind) {                findeIdex = i;                break;            }        };        if (isFind) {            //有的话,清除当前路由以后的数据            routes.splice(findeIdex + 1, routes.length - findeIdex - 1);            //修改缓存            localStorage.setItem('routeList', JSON.stringify(routes));        } else {            //存入全局变量            routes.push(val);            //设置缓存            localStorage.setItem('routeList', JSON.stringify(routes));        }    }

 

 

 
页面使用:
//获取面包屑缓存
let localStorageList1 = localStorage.getItem('routeList');     //ts写法 as any    this.routeList = JSON.parse(localStorageList1 as any)       ? JSON.parse(localStorageList1 as any)      : { name: 'test', url: '/test' };

 

知识点:

1、localstorage

2、JSON.stringify()的作用是将 JavaScript 值转换为 JSON 字符串,JSON.parse()将JSON字符串转为一个对象

 

转载于:https://www.cnblogs.com/qiufang/p/11544538.html

你可能感兴趣的文章
Qt 【无法打开 xxxx头文件】
查看>>
JAVA项目将 Oracle 转 MySQL 数据库转换(Hibernate 持久层)
查看>>
三层架构(我的理解及详细分析)
查看>>
Django模板语言相关内容
查看>>
前端开发工程师如何在2013年里提升自己【转】--2016已更新升级很多何去何从?...
查看>>
markdown语法测试集合
查看>>
running and coding
查看>>
实现QQ第三方登录、网站接入
查看>>
HTML CSS 层叠样式表 三
查看>>
Qt pro pri 文件学习1
查看>>
软件工程概论第六周学习进度条
查看>>
[思路]导入导出功能
查看>>
【iOS】UICollectionView自己定义Layout之蜂窝布局
查看>>
golang——(strings包)常用字符串操作函数
查看>>
发布aar到jcenter
查看>>
跨浏览器问题的五种解决方案
查看>>
XPath定位时,使用文本的方法小技巧。
查看>>
安装pandas报错(AttributeError: 'module' object has no attribute 'main')
查看>>
ch02 fundamental definition 01
查看>>
JSON解析
查看>>