vue面包屑动态标题 多级路由嵌套设置显示

面包屑效果

三级路由，可以通过面包屑进行跨级跳转

面包屑组件,breadcrumb.vue

<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: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    getBreadcrumb() {
      //$route.matched一个数组 包含当前路由的所有嵌套路径片段的路由记录
      let matched = this.$route.matched.filter((item) => item.meta.title);
      const first = matched[0];
      this.levelList = matched;
    },
  },
};
</script>

应用

在最外层引入这个组件

<script>
  import Breadcrumb from './navbar.vue'
  export default {
    components: {
      Breadcrumb
    }
}
</script>

路由

多级路由嵌套设置默认页面 只需要把默认的子路由的path项设定为空
以下为路由的索引页./route/index.js的实例

import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router);
 
export default new Router({
  routes: [{
      path: '/',
      name: 'Login',
      component: resolve => require(['@/components/Login'], resolve),
      hidden: true //表示在左侧导航栏隐藏
    },
    {
      path: '/home.html',
      name: '一级',
      component: resolve => require(['@/components/Home'], resolve),
      iconCls: "el-icon-menu",
      meta: {
        title: '一级',
        keepAlive: false, // 不需要缓存
        requireAuth: true //表示进入这个路由是需要登录的
      },
      children: [
        {
          path: '/feedback.html',
          component: resolve => require(['@/components/user/feedback'], resolve),
          name: '二级',
          meta: {
            title: '二级',
            keepAlive: false, // 不需要缓存
            requireAuth: true // 添加该字段，表示进入这个路由是需要登录的
          },
            children: [{
          path: '',//这里设置为空
          component: resolve => require(['@/components/user/userChildren'], resolve),
          name: '三级',
          meta: {
            title: '三级',
            keepAlive: false, // 不需要缓存
            requireAuth: true // 添加该字段，表示进入这个路由是需要登录的
          }
        }
      ]
        }
      ]
    }
  ]
})

多路由嵌套

需要注意的是,每个子路由都需要对应一个 标签来存放

我新建了一个main.vue来存放多路由嵌套多个界面

<template>
  <keep-alive>
    <router-view :key="Math.random()"></router-view>
  </keep-alive>
</template>
<script>
</script>
<style>
</style>