VUE+elementui面包屑实现动态路由详解
更新时间:2019年11月04日 14:45:30 作者:lzcwds
今天小编就为大家分享一篇VUE+elementui面包屑实现动态路由详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
我的路由:
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面包屑实现动态路由详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Electron自动更新失效报错Error: Object has been destroyed的问题解决
本文主要讲解如何解决 Error: Object has been destroyed 这个 Electron 中最常见的问题,以及 Electron 自动更新的流程,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下2024-01-01
最新评论