固定路由的面包屑導航
我們在配置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 解決多級動態面包屑導航的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
