vue3后台管理系统面包屑

在 Vue3 后台管理系统中，可以使用 Vue Router 的导航守卫来实现面包屑功能。具体实现步骤如下：

1. 在路由配置中，为每个路由添加 meta 属性，用于存储该路由对应的面包屑信息，例如：

const routes = [
  {
    path: '/',
    component: Home,
    meta: {
      breadcrumb: '首页'
    }
  },
  {
    path: '/user',
    component: User,
    meta: {
      breadcrumb: '用户管理'
    },
    children: [
      {
        path: 'list',
        component: UserList,
        meta: {
          breadcrumb: '用户列表'
        }
      },
      {
        path: 'add',
        component: UserAdd,
        meta: {
          breadcrumb: '添加用户'
        }
      }
    ]
  }
]

2. 在页面中，通过 $route 对象获取当前路由的 meta 属性，并将其渲染为面包屑导航，例如：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in breadcrumb" :key="index">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  computed: {
    breadcrumb() {
      const routes = this.$route.matched
      const result = []
      routes.forEach(route => {
        if (route.meta && route.meta.breadcrumb) {
          result.push({
            name: route.meta.breadcrumb,
            path: route.path
          })
        }
      })
      return result
    }
  }
}
</script>