vue2实现同级路由面包屑

在 Vue 2 中，可以使用 vue-router 和动态路由来实现同级路由的面包屑导航。下面是一个简单的示例：

首先，确保你已经安装了 vue-router。可以使用以下命令进行安装：

npm install vue-router

然后，在你的路由配置文件中，设置动态路由，并为每个路由添加一个 `meta` 属性，用于存储面包屑的信息。例如：

// router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      breadcrumb: [
        { text: 'Home', link: '/' }
      ]
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      breadcrumb: [
        { text: 'Home', link: '/' },
        { text: 'About', link: '/about' }
      ]
    }
  },
  // 其他路由...
]

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

export default router

在上面的示例中，每个路由都有一个 `breadcrumb` 数组，用于存储面包屑的信息。每个面包屑项都包含一个 `text` 属性和一个 `link` 属性，分别表示面包屑显示的文本和跳转链接。

接下来，在你的组件中，可以使用 `this.$route.meta.breadcrumb` 来获取当前路由的面包屑信息。然后，你可以在模板中循环遍历面包屑数组，并渲染面包屑导航。

<!-- App.vue -->

<template>
  <div>
    <nav>
      <ul>
        <li v-for="item in breadcrumb" :key="item.text">
          <router-link :to="item.link">{{ item.text }}</router-link>
        </li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  computed: {
    breadcrumb() {
      return this.$route.meta.breadcrumb
    }
  }
}
</script>

在上面的示例中，我们使用了 `v-for` 指令来循环遍历面包屑数组，并使用 `router-link` 组件来渲染面包屑导航的每个项。

这样，当你在应用中切换路由时，面包屑导航会根据当前路由的 `meta` 属性自动更新。

希望这个示例可以帮助到你实现同级路由的面包屑导航。如果还有其他问题，请随时提问。