vue 使用localstorage实现面包屑的操作


Posted in Javascript onNovember 16, 2020

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字符串转为一个对象

补充知识:vue+elementUI动态生成面包屑导航

vue 使用localstorage实现面包屑的操作

项目需要动态生成面包屑导航,并且首页可以点击.其余为路径显示

<el-menu :unique-opened="true" router :default-active="$route.path" @select="handleSelect">
    <div class="user-menu-box" v-for="menu in menus" :key="menu.id">
      <el-menu-item v-if="!menu.child" :index="menu.path">
        <icon :name="menu.icon" :w="20" :h="20"></icon>
        <span slot="title" v-text="menu.name"></span>
      </el-menu-item>
      <el-submenu v-if="menu.child" :index="menu.path">
        <template slot="title">
          <icon :name="menu.icon" :w="20" :h="20"></icon>
          <span slot="title" v-text="menu.name"></span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="subMenu in menu.child" :key="subMenu.id" v-text="subMenu.name"
            :index="subMenu.path"></el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </div>
</el-menu>

上面的代码是elementUI组件的样式,根据项目需要做了修改,搬运的时候根据项目自己改改

export default {
  data () {
    return {
      activeMenu: '',
      indexBreadcrumbs: [],
      menus: [{
        id: '1',
        name: '门户管理',
        icon: 'menhuguanli',
        path: '#2',
        child: [{
          id: '1-1',
          name: '轮播图',
          path: '/backstage/protaManage/turns'
        }, {
          id: '1-2',
          name: '基础数据',
          path: '/backstage/protaManage/basis'
        }, {
          id: '1-3',
          name: '分类管理',
          path: '/backstage/protaManage/classify'
        }, {
          id: '1-4',
          name: '内容发布',
          path: '/backstage/protaManage/content'
        }]
      }, {
        id: '2',
        name: '我的云盘',
        icon: 'yunpan',
        path: '/backstage/yunManage'
      }, {
        id: '3',
        name: '管理菜单',
        icon: 'shezhi',
        path: '/backstage/menusManage'
      }, {
        id: '4',
        name: '编辑板块',
        icon: 'fabuzhongxin',
        path: '/backstage/editPlate'
      }]
    }
  },
  watch: {
    $route () {
      this.handChange()
    }
  },
  computed: {
    breadcrumbList () {
      let breadcrumbs = []
      let menuList = this.menus
      this.indexBreadcrumbs.map(item => {
        for (let i = 0; i < menuList.length; i++) {
          if (item === menuList[i].path) {
            breadcrumbs.push(menuList[i])
            if (menuList[i].child) {
              menuList = menuList[i].child
            }
            break;
          }
        }
      })
      return breadcrumbs
    }
  },
  methods: {
    handChange () {
      this.$emit('hand-change', this.breadcrumbList)
    },
    handleSelect (index, indexPath) {
      this.indexBreadcrumbs = indexPath
    }
  },
  created () {
    this.handChange()
  }
}

上面的代码是模拟的数据,调用elememtUI的组件导航菜单的中的@select方法,有两个参数,可以自行打印

vue 使用localstorage实现面包屑的操作

然后在computed中计算当前选中的是哪一部分,取到返回值,然后$emit传给父组件,

<el-breadcrumb separator-class="el-icon-arrow-right">
   <el-breadcrumb-item :to="{ path: '/backstage' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item v-for="o in breadcrumbList" :key="o.id">{{o.name}}
   </el-breadcrumb-item>
 </el-breadcrumb>

父组件中取到子组件传过来的值后,直接渲染就行了

以上这篇vue 使用localstorage实现面包屑的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
js 窗口抖动示例
Sep 04 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 #Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 #Javascript
Vue 数据绑定的原理分析
Nov 16 #Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 #Javascript
Vue指令实现OutClick的示例
Nov 16 #Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 #Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 #Javascript
You might like
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
PHP和.net中des加解密的实现方法
2013/02/27 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python排序算法实例代码
2017/08/10 Python
Django如何配置mysql数据库
2018/05/04 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
Python程序暂停的正常处理方法
2019/11/07 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
C语言编程题
2015/03/09 面试题
实习评语
2013/12/16 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang
Ajax实现三级联动效果
2021/10/05 Javascript
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS