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替换文本域内的回车示例
Feb 18 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
laravel入门知识点整理
2020/09/15 PHP
javascript getElementsByTagName
2011/01/31 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
python中的装饰器详解
2015/04/13 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
深入浅析Python中的yield关键字
2018/01/24 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
美国知名生活购物网站:Goop
2017/11/03 全球购物
《守株待兔》教学反思
2014/03/01 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
中式结婚主持词
2014/03/14 职场文书
自我鉴定总结
2014/03/24 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
一般纳税人申请报告
2015/05/18 职场文书
夏洛特的网观后感
2015/06/15 职场文书