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 获取当前时间戳的代码
Aug 05 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
php判断访问IP的方法
2015/06/19 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
PHP函数超时处理方法
2016/02/14 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
python遍历类中所有成员的方法
2015/03/18 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
销售业务实习自我鉴定
2013/09/23 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
小学国庆节活动方案
2014/02/11 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
自书遗嘱范文
2015/08/07 职场文书