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版本的代码
Sep 03 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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伪静态页面函数附使用方法
2008/06/20 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
python学生信息管理系统
2018/03/13 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
html5与css3小应用
2013/04/03 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
机关单位动员会主持词
2014/03/20 职场文书
英语专业求职信
2014/07/08 职场文书
公司管理建议书
2015/09/14 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL