今天小编就为大家分享一篇Vue 解决多级动态面包屑导航的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
固定路由的面包屑导航
我们在配置router的时候，可以将面包屑数据配置在meta中，
例如
路由配置：
{ path: '/project/process/:id', name: 'process', component: () => import('@/views/project/process/main.vue'), meta: [ { name: '项目管理列表' }, { name: '项目列表', url: '/project/list' }, { name: '里程碑' }, ], },
代码：
{{item.name}} {{item.name}}
如果单纯的是展示，就可以不用写url链接，路由配置成这样
{ path: '/project/process/:id', name: 'process', component: () => import('@/views/project/process/main.vue'), meta: [‘项目管理', '项目进度', '里程碑'], },
然后代码：
首页 {{item}}
解决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 解决多级动态面包屑导航的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多本文来源gao@daima#com搞(%代@#码@网2支持gaodaima搞代码网。
以上就是Vue 解决多级动态面包屑导航的问题的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue 解决多级动态面包屑导航的问题
转载请注明原文链接：Vue 解决多级动态面包屑导航的问题
