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 相关文章推荐
JavaScript 学习笔记(五)
Dec 31 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
编程语言JavaScript简介
Oct 16 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
JS中数组重排序方法
Nov 11 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
vue实现打地鼠小游戏
Aug 21 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
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
python中 chr unichr ord函数的实例详解
2017/08/06 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
兼职学生的自我评价
2013/11/24 职场文书
对标管理实施方案
2014/03/12 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
小学教师自我评价
2015/03/04 职场文书
开除员工通知
2015/04/22 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
班级管理经验交流材料
2015/11/02 职场文书