使用$route制作面包屑

使用$route制作面包屑

1. 在router中加上meta属性

{
    path: '/thematicDiscussion',
    name: 'thematicDiscussion',
    redirect: '/thematicDiscussion/home',
    component: layout,
    // component: thematicDiscussion,
    meta: { title: '专题讨论', icon: 'el-icon-location' },
    children: [
      {
        path: 'home',
        name: 'thematicHome',
        meta: { title: '首页' },
        component: thematicList,
      },

2. 在watch中监测$route

watch: {
    $route(route) {
      // if you go to the redirect page, do not update the breadcrumbs
      if (route.path.startsWith('/redirect/')) {
        return
      }
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },

3.用this.$route.matched获取当前的route信息， 最后获取到this.levelList就能做面包屑了

getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      const first = matched[0]
      console.log('matched[0]', this.$route.matched);
      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },