通过 meta 设定父级页面信息

面包屑数据，用 pina 或 vuex 管理更好

import { Ref, ref } from "vue";
interface Breadcrumb {
  title: string;
  pageName: string;
}
// 面包屑数据
export const breadcrumbData: Ref<Breadcrumb[]> = ref([]);

路由信息，在 router.beforeEach 中设置面包屑数据

import Vue from "vue";
import VueRouter, { Route, RouteConfig } from "vue-router";
import HomeView from "../views/HomeView.vue";
import { breadcrumbData } from "@/common/breadcrumb";

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
  {
    path: "/",
    name: "home",
    component: HomeView,
    meta: {
      breadcrumbTitle: "主页",
    },
  },
  {
    path: "/about",
    name: "about",
    meta: {
      fatherPageName: "home",
      breadcrumbTitle: "关于",
    },
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

function setBreadcrumbData(route: Route) {
  const { name, meta } = route;
  if (!name) throw new Error("routes中页面必须包含 name 参数");

  if (meta) {
    const { fatherPageName, breadcrumbTitle } = meta;
    breadcrumbData.value.unshift({
      pageName: name,
      title: breadcrumbTitle,
    });
    if (fatherPageName) {
      const { route: fatherRoute } = router.resolve({ name: fatherPageName });
      setBreadcrumbData(fatherRoute);
    }
  } else {
    throw new Error("routes中页面必须包含 meta.breadcrumbTitle 参数");
  }
}

router.beforeEach((to, from, next) => {
  breadcrumbData.value = [];
  setBreadcrumbData(to);
  next();
});

export default router;

面包屑element-ui面包element

面包屑vue-router面包matched

526互联

面包屑

通过 meta 设定父级页面信息