mutation.js代码:
changeRoute(state, val) {
let routeList = state.routeList;
let isFind = false;
let findeIdex = ; //菜单栏和下拉的二级菜单
if (val['type'] == 'header' || val['type'] == 'secondHeader') {
routeList.length = ;
//顶级菜单清除缓存
localStorage.removeItem("routeList");
}
let routes = routeList;
let localStorageList = localStorage.getItem('routeList');
if (localStorageList) {
//当前页刷新,使用缓存数据
routes = JSON.parse(localStorageList as any);
}
//遍历是否有存入当前路由位置
for (let i = ; i < routes.length; i++) {
isFind = routes[i]['name'] == val['name'];
if (isFind) {
findeIdex = i;
break;
}
};
if (isFind) {
//有的话,清除当前路由以后的数据
routes.splice(findeIdex + , routes.length - findeIdex - );
//修改缓存
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字符串转为一个对象

vue 使用localstorage实现面包屑的更多相关文章

  1. vue三级路由显示+面包屑

    问题一:如何让三级路由内容显示显示在一级路由页面 可以说是我点级二级路由导航的时候是不发生跳转的,但还要去动态的生成面包屑 const routes = [{ path: '/', name: 'Ho ...

  2. vue iview面包屑

    简单看一下vue,iview的面包屑怎么写呢? 简单的思路:1.获取到路由记录$route.matched 2.渲染 效果: 一.$route.matched 官网地址:https://router. ...

  3. vue 在safari动态多级面包屑导航样式不刷新的bug

    前言: 最近做公司的管理系统,用到了elementUI 里面的 bread面包屑组件,本来一切好好的,谁知道mac的safari样式全部缓存了,硬是下面这种效果,真头疼 而chrome,QQ均显示正常 ...

  4. Vue折腾记 - (2)写一个不大靠谱的面包屑组件

    先看效果图 我把页面标题和面包屑封装到一起..就不用涉及到组件的通讯了,不然又要去监听路由或者依赖状态去获取 这里写图片描述 疑惑解答: 点击父(也就是折叠菜单)为什么会跑到子菜单第一个 因为我第一个 ...

  5. Vue + Element-ui实现后台管理系统(3)---面包屑 + Tag标签切换功能

    面包屑 + Tag标签切换功能 有关后台管理系统之前写过两遍博客,看这篇之前最好先看下这两篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system 1.V ...

  6. vue 2.0 + elementUI 实现面包屑导航栏

    Main.js 9种响应式面包屑导航和分步导航指示器UI设计 var routeList = []; router.beforeEach((to, from, next) => { var in ...

  7. Bootstrap <基础十八>面包屑导航(Breadcrumbs)

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

  8. 菜单导航/URHere/面包屑,通过CSS中的content简洁表达代码

    比如我们要写一个菜单导航/URHere/面包屑,如: 首页 > 个人中心 > 修改密码 代码: <ul> <li><a href="javascri ...

  9. 缓存篇(Cache)~第一回 使用static静态成员实现服务器端缓存(导航面包屑)

    返回目录 今天写缓存篇的第一篇文章,在写完目录后,得到了一些朋友的关注,这给我之后的写作带来了无穷的力量,在这里,感谢那几位伙伴,哈哈! 书归正传,今天我带来一个Static静态成员的缓存,其实它也不 ...

随机推荐

  1. python 各层级目录下的import方法

    ---恢复内容开始--- 以前经常使用python2.现在很多东西都切换到了python3,发现很多东西还是存在一些差异化的.跨目录import是常用的一种方法,并且有不同的表现形式,新手很容易搞混. ...

  2. Kettle实现从数据库中提取数据到Excel

    因为有个日常提数,工作日每天都要从数据库中提取数据,转换为excel,再以邮件的形式发给用户. 刚好近期同事在研究使用kettle自动提数且完成邮件的发送,觉得很实用又挺有意思的就学了一下这个技能~ ...

  3. Java中Set与Set<?>到底区别在哪?

    您可能知道,无界通配符 Set<?> 可以容纳任何类型的元素,而原始类型Set也可以容纳任何类型的元素.那它们之间有什么区别呢? 1.关于Set<?>的两个事实 关于Set&l ...

  4. IT兄弟连 Java语法教程 数据类型 进制转换

    ●  正十进制转换为二进制 拆分法,将十进制整数拆分为若干个二进制权重的和,若有该权重则下面写1,否则写0.如: 34 = 32 + 2 128 64 32 16 8 4 2 1 0  0  1  0 ...

  5. Web前端基础(5):CSS(二)

    1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...

  6. 一个小事例,了解golang通道阻塞模式

    在学习golang中,channel真的是让人捉摸不透的东西,本来我自以为我理解了协程阻塞的用法了,结果就下面这个小例子,我还是在打印输出后才搞明白到底怎么回事? 当然了,这也是我自身对协程这块不太熟 ...

  7. LinuxShell脚本——函数

    LinuxShell脚本——函数 摘要:本文主要学习了Shell中函数的定义和使用. 函数的定义 Shell函数的本质是一段可以重复使用的脚本代码,这段代码被提前编写好了,放在了指定的位置,使用时直接 ...

  8. qt 使用OpenCV

    使用MinGW编译OpenCV源码 下载OpenCV源码.CMake编译工具 编译安装完: Qt工程配置 INCLUDEPATH += D:/qt_work/opencv/build/install/ ...

  9. spark的wordcount

    在开发环境下实现第一个程序wordcount 1.下载和配置scala,注意不要下载2.13,在spark-core明确支持scala2.13前,使用2.12或者2.11比较好. https://ww ...

  10. [b0040] python 归纳 (二五)_多进程数据共享和同步_信号量Semaphore

    # -*- coding: utf-8 -*- """ 多进程同步 使用信号量 multiprocessing.Semaphore 逻辑: 启动5个进程,打印,每个各自睡 ...