Vue 解决多级动态面包屑导航的问题

固定路由的面包屑导航

我们在配置router的时候，可以将面包屑数据配置在meta中，

例如

路由配置：

{
  path: \'/project/process/:id\',
  name: \'process\',
  component: () => import(\'@/views/project/process/main.vue\'),
  meta: [
    { name: \'项目管理列表\' },
    { name: \'项目列表\', url: \'/project/list\' },
    { name: \'里程碑\' },
  ],
},

代码：

<el-breadcrumb separator-class=\"el-icon-arrow-right\">
 <el-breadcrumb-item v-for=\"(item, index) in $route.meta\" :key=\"index\">
    <router-link v-if=\"item.url\" :to=\"item.url\">{{item.name}}</router-link>
    <a v-else>
      {{item.name}}
    </a>
  </el-breadcrumb-item>
</el-breadcrumb>

如果单纯的是展示，就可以不用写url链接，路由配置成这样

{
  path: \'/project/process/:id\',
  name: \'process\',
  component: () => import(\'@/views/project/process/main.vue\'),
  meta: [‘项目管理\', \'项目进度\', \'里程碑\'],
},

然后代码：

<el-breadcrumb separator=\"/\">
  <el-breadcrumb-item :to=\"{path: \'/home\'}\">首页</el-breadcrumb-item>
  <el-breadcrumb-item v-for=\"(item, index) in $route.meta\" :key=\"index\">
  {{item}}
  </el-breadcrumb-item>
</el-breadcrumb>

解决Vue多级动态面包屑导航

针对一些比较固定式的面包屑是很好实现的，但是我们在项目中经常会遇到一些动态路由，

例如： A页面路由为 /list

从A页面跳转到B页面为 /list/:id

B页面下又存在一个字页面， /list/detail

我们在C页面想通过面包屑导航的方式进入B页面怎么办呢？

针对这种动态嵌套多级路由应该怎么处理呢？

配置路由

...
{
  path: \'/type\',
  name: \'type\',
  component: () => import(\'@/views/type/main.vue\'),
  meta: [
    { name: \'项目分类\' },
  ],
},
{
  path: \'/type/list/:id\',
  name: \'list\',
  component: () => import(\'@/views/list/type/main.vue\'),
  meta: [
    { name: \'项目分类\', url: \'/list\' },
    { name: \'项目列表\' },
  ],
},
{
  path: \'/list/detail\',
  name: \'detail\',
  component: () => import(\'@/views/type/list/detail/index.vue\'),
  meta: [
    { name: \'项目分类\', url: \'/list\' },
    { name: \'项目列表\', url: \'/type/list\' },
    { name: \'详情\' },
  ],
},
...

可以看出这个路由没有什么区别，唯一值得注意的一点就是里详情页面，是一个动态的路由，从详情页面跳转到项目列表我们需要相应的id信息，但是此时id我们不能固定填入，而是一个动态的值。

修改detail页面

在milestone页面监听beforeRouteEnter事件

beforeRouteEnter(to, from, next) {
  const meta = to.meta;
  for (let i = 0; i < meta.length; i++) {
    if (meta[i].name === \'项目列表\') {
      meta[i].url = `/type/list/${from.params.id}`;
    }
  }
  next();
  },

在beforeRouteEnter事件中修改meta信息，从而更新面包屑的导航路由。

主要的实现思路就是在目标页面添加beforeRouteEnter事件，然后更改其meta配置信息，从而达到更改面包屑导航路径。

如果你还有更好的解决办法，欢迎留言。

以上这篇Vue 解决多级动态面包屑导航的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。