VUE+elementui面包屑实现动态路由详解


Posted in Javascript onNovember 04, 2019

我的路由:

const routerMap = [
  {
    path: '/',
    redirect: 'dashboard',
    component: Layout,
    name:'Dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/view/dashboard'),
        name: 'Dashboard',
        meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
      }
    ]
  },{
    path:'/test',
    component:Layout,
    redirect: '/test/index',
    name:'Test',
    meta:{title:'test',icon:'lock'},
    children:[
      {
        path:'index',
        component:()=>import('@/view/test'),
        name:'test',
        meta:{title:'test', icon: 'example', noCache: true }
      },{
        path:'example',
        component:()=>import('@/view/test/example'),
        name:'example',
        meta:{title:'example',icon:'404'}
      }
    ]
  }
]

面包屑代码:

<template>
  <div class="navbar clearfix">
    <el-breadcrumb class="breadcrumb-container" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="item in levelList":key="item.path" :to="item.path">{{item.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
  export default {
    name: 'Navbar',
    data() {
      return {
        levelList: []
      }
    },
    watch: {
      $route() {
        this.getBreadcrumb()
      }
    },
    created(){
      this.getBreadcrumb()
    },
    methods:{
      getBreadcrumb() {
        let matched = this.$route.matched.filter(item => item.name)
        const first = matched[0];
        if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
          matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
        }
        this.levelList = matched
      }
    }
  }
</script>

原理:通过监听当前路由的变化,动态更新面包屑的内容。

以上这篇VUE+elementui面包屑实现动态路由详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
jquery图片切换实例分析
Apr 15 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 #Javascript
vue双向绑定数据限制长度的方法
Nov 04 #Javascript
使用p5.js临摹动态图片
Nov 04 #Javascript
p5.js绘制创意自画像
Nov 04 #Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 #Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 #Javascript
vue中使用GraphQL的实例代码
Nov 04 #Javascript
You might like
PHP安装全攻略:APACHE
2006/10/09 PHP
PHP中的类-什么叫类
2006/11/20 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
js命名空间写法示例
2015/12/18 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Python 函数基础知识汇总
2018/03/09 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
幼儿园中秋节活动方案2013
2014/01/29 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python