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 while语句和do while语句的区别分析
Dec 08 Javascript
Js动态创建div
Sep 25 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 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代码
2011/11/27 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
php文件操作相关类实例
2015/06/18 PHP
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
Python入门篇之文件
2014/10/20 Python
Python编写屏幕截图程序方法
2015/02/18 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
EJB面试题
2015/07/28 面试题
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
设备管理实施方案
2014/05/31 职场文书
安全施工标语
2014/06/07 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
党员志愿者活动方案
2014/08/28 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
单位租房协议书样本
2014/10/30 职场文书
捐书活动倡议书
2015/04/27 职场文书
老员工辞职信范文
2015/05/12 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技
Java Redisson多策略注解限流
2022/09/23 Java/Android