本文共 2417 字，大约阅读时间需要 8 分钟。

效果展示：

实现的思路

• 需要在路由的meta中设置breadNumber字段，‘一级页面’不设置breadNumber（因为大部分页面是一级页面，所以就不设置了~），‘二级页面’设置breadNumber=2，‘三级页面’设置breadNumber=3，以此类推…
• meta的定义：meta简单来说就是路由元信息 也就是每个路由身上携带的信息。
• meta的作用：有利于我们处理seo的东西，我们在html中加入meta标签，就是有利于处理seo的东西，搜索引擎
• 在面包屑的页面监听路由，路由变化时则触发面包屑数据处>理事件，数据处理详细在getBreadcrumb方法
• 面包屑数据处理完成后，要做刷新页面时缓存数据的操作（这里是用vuex配合sessionStorage来实现）

代码的具体实现思路：

路由配置：

import Vue from "vue";import VueRouter from "vue-router";Vue.use(VueRouter);const routes = [  {
       path: "/",    component: () => import("../views/Home.vue"),    children: [      {
           path: "/index1",        component: () => import("../views/index1.vue"),        meta: {
             requireAuth: true,        },      },      {
           path: "/index2",        name: "index2",        component: () => import("../views/index2.vue"),        meta: {
             requireAuth: true,          breadNumber: 2,        },      },      {
           path: "/index3",        name: "index3",        component: () => import("../views/index3.vue"),        meta: {
             requireAuth: true,          breadNumber: 3,        },      },      {
           path: "/index4",        name: "index4",        component: () => import("../views/index4.vue"),        meta: {
             requireAuth: true,          breadNumber: 4,        },      },    ],  },];const router = new VueRouter({
     mode: "history",  base: process.env.BASE_URL,  routes,});export default router;

组件中使用：

vuex 的配置：

import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({
     state: {
       breadListState: [], // 面包屑列表数据  },  mutations: {
       breadListMutations(getters, list) {
         getters.breadListState = list;    },  },  actions: {
   },  modules: {
   },});

APP.vue页面的相关配置（用于页面刷新时缓存vuex数据）

created: function () {
       // 在页面加载时读取sessionStorage里的状态信息    sessionStorage.getItem("umeetCloudVuex") && this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(sessionStorage.getItem("umeetCloudVuex"))));    // 在页面刷新时将vuex里的信息保存到sessionStorage里    window.addEventListener("beforeunload", () => {
         sessionStorage.setItem("umeetCloudVuex", JSON.stringify(this.$store.state));    });  },

此文章有那些需要修改的地方，请尽快指出，会即使修改！

转载地址：https://blog.csdn.net/weixin_46174785/article/details/110502372 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！