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

818 阅读 0 评论 540 点赞

我是靠谱客的博主高挑棒棒糖，最近开发中收集的这篇文章主要介绍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面包屑实现动态路由详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持靠谱客。