Element UI动态实现面包屑导航~

思路：监听路由变化，在路由规则中添加meta然后在组件中渲染。

import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

const router = new VueRouter({
    routes:[{
        path:'/',
        redirect:'/welcome',
    },
    {
        path:'/home',
        name:'home',
        component:()=>import('../src/view/showIndex.vue'),
        meta:{
            title:'首页'
        },
        children:[{
            path:'/user',
            name:'user',
            component:()=>import('../src/view/user.vue'),
            meta:{
                title:'用户管理'
            }
        },
        {
            path:'/categroy',
            name:'categroy',
            component:()=>import('../src/view/categroy.vue'),
            meta:{
                title:'品类管理'
            }
        },
        {
            path:'/product',
            name:'product',
            component:()=>import('../src/view/product.vue'),
            meta:{
                title:'商品生产'
            }
        },
        {
            path:'/sex',
            name:'sex',
            component:()=>import('../src/view/sex.vue'),
            meta:{
                title:'角色管理'
            }
        },
        {
            path:'/welcome',
            name:'welcome',
            component:()=>import('../src/view/welcome.vue'),
        }
    ]
    },
    {
        path:'/shang',
        name:'shang',
        component:()=>import('../src/view/showIndex.vue'),
        meta:{
            title:'商品'
        },
        children:[
        {
            path:'/user2',
            name:'user2',
            component:()=>import('../src/view/user2.vue'),
            meta:{
                title:'用户管理2'
            }
        },]
    },
    {
        path:'/login',
        name:'login',
        component:()=>import('../src/view/loginNews.vue')
    },
]
})
// 路由前置守卫
router.beforeEach((to,from,next) => {
    const token = localStorage.getItem("token")
    if(to.path ==='/login'){
        next()
    }else{
        if(token){
            next()
        }else{
            next('/login')
        }
    }
    
})

export default router

<template>
  <div class="home">
    <!-- 首页 -->
    <el-container>
      <el-header>
        <!-- 头部 -->
        <showTop></showTop>
      </el-header>
      <el-container>
        <el-aside width="200px;">
          <AsideLeft></AsideLeft>
        </el-aside>
        <el-main>
          <!-- 面包屑导航 -->
          <Breadcrumb></Breadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import showTop from "../components/showTop.vue";
import AsideLeft from "../components/AsideLeft.vue";
import Breadcrumb from "../components/Breadcrumb.vue"
export default {
  name: "showIndex",
  components: {
    showTop,
    AsideLeft,
    Breadcrumb
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #ffffff;
  text-align: center;
  line-height: 60px;
  background-color: rgb(60, 60, 60);
}

.el-aside {
  background-color: rgb(60, 60, 60);
  color: #333;
  text-align: center;
  line-height: 200px;
  position: absolute;
  top: 60px;
  bottom: 0px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  position: absolute;
  top: 60px;
  left: 200px;
  right: 0;
  bottom: 0px;
}

body > .el-container {
  margin-bottom: 40px;
  position: relative;
}
</style>

<template>
  <!-- 面包屑导航 -->
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
        v-for="(item, index) in list"
        :key="index"
        :to="item.path"
        >{{ item.title }}</el-breadcrumb-item
      >
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "BreadCrumb",
  data() {
    return {
      list: [],
    };
  },
  mounted(){
    //   解决刷新面包屑消失问题
    if(localStorage.getItem('BreadCrumb')){
        this.list = JSON.parse(localStorage.getItem('BreadCrumb'))
    }
    
  },
  watch: {
    $route() {
      console.log("this.$route", this.$route);
      this.fn()
    },
  },
  methods: {
    fn() {
      this.list = [];
      const matched = this.$route.matched;
      matched.forEach((item) => {
        // 首页不需要面包屑导航
        if (this.$route.name == "welcome" || this.$route.name == "home") {
          return;
        }
        this.list.push({ title: item.meta.title, path: item.path });
      });
      //   解决刷新面包屑消失问题
        localStorage.setItem('BreadCrumb',JSON.stringify(this.list))
    },
  },
};
</script>

<style></style>