动态breadcrumb

Posted 2020-11-21 ronle

新建Breadcrumb.vue

<template>
  <div class="example-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item
        v-for="(item,index) in breadList"
        :key="index"
        :to="{ path: item.path }"
      >{{item.meta.title}}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
  export default {
    name: ‘Breadcrumb‘,
    data() {
      return {
        breadList: [] // 路由集合
      };
    },
    watch: {
      $route() {
        this.getBreadcrumb();
      }
    },
    methods: {
      isHome(route) {
        return route.name === ‘Home‘;
      },
      getBreadcrumb() {
        let matched = this.$route.matched;
        //如果不是首页
        if (!this.isHome(matched[0])) {
          matched = [{path: ‘/home‘, meta: {title: ‘首页‘}}].concat(matched);
        }
        this.breadList = matched;
        console.log(this.breadList)
      }
    },
    created() {
      this.getBreadcrumb();
    }
  }
</script>

路由

const router = new Router({
  routes: [
    {
      path: ‘/‘,
      redirect: ‘/home‘
    },
    {
      path: ‘/home‘,
      name: ‘home‘,
      component: Home,
      meta: { title: ‘首页‘ }
    },
    {
      path: ‘/setting‘,
      name: "setting",
      component: () => import(‘./views/setting/Setting.vue‘),
      redirect: ‘/setting/user‘,
      meta: { title: ‘系统设置‘ },
      children: [{
        path: ‘user‘,
        component: () => import(‘./views/setting/UserMange.vue‘),
        name: ‘usermanage‘,
        meta: { title: ‘用户管理‘ }
      }, {
        path: ‘message‘,
        component: () => import(‘./views/setting/MesMange.vue‘),
        name: ‘mesmanage‘,
        meta: { title: ‘短信管理‘ }
      }]
    },
    {
      path: ‘/example‘,
      name: ‘example‘,
      component: Example,
      meta: { title: ‘综合实例‘ }
    }
  ]
});
export default router;

然后以子组件形式放到需要的地方