Vue 解決多級(jí)動(dòng)態(tài)面包屑導(dǎo)航的問題

更新時(shí)間：2019年11月04日 15:04:30 作者：筱筱醬

今天小編就為大家分享一篇Vue 解決多級(jí)動(dòng)態(tài)面包屑導(dǎo)航的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

固定路由的面包屑導(dǎo)航

我們在配置router的時(shí)候，可以將面包屑數(shù)據(jù)配置在meta中，

例如

路由配置：

{
  path: '/project/process/:id',
  name: 'process',
  component: () => import('@/views/project/process/main.vue'),
  meta: [
    { name: '項(xiàng)目管理列表' },
    { name: '項(xiàng)目列表', 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: [‘項(xiàng)目管理', '項(xiàng)目進(jìn)度', '里程碑'],
},

然后代碼：

<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多級(jí)動(dòng)態(tài)面包屑導(dǎo)航

針對(duì)一些比較固定式的面包屑是很好實(shí)現(xiàn)的，但是我們在項(xiàng)目中經(jīng)常會(huì)遇到一些動(dòng)態(tài)路由，

例如： A頁面路由為 /list

從A頁面跳轉(zhuǎn)到B頁面為 /list/:id

B頁面下又存在一個(gè)字頁面， /list/detail

我們在C頁面想通過面包屑導(dǎo)航的方式進(jìn)入B頁面怎么辦呢？

針對(duì)這種動(dòng)態(tài)嵌套多級(jí)路由應(yīng)該怎么處理呢？

配置路由

...
{
  path: '/type',
  name: 'type',
  component: () => import('@/views/type/main.vue'),
  meta: [
    { name: '項(xiàng)目分類' },
  ],
},
{
  path: '/type/list/:id',
  name: 'list',
  component: () => import('@/views/list/type/main.vue'),
  meta: [
    { name: '項(xiàng)目分類', url: '/list' },
    { name: '項(xiàng)目列表' },
  ],
},
{
  path: '/list/detail',
  name: 'detail',
  component: () => import('@/views/type/list/detail/index.vue'),
  meta: [
    { name: '項(xiàng)目分類', url: '/list' },
    { name: '項(xiàng)目列表', url: '/type/list' },
    { name: '詳情' },
  ],
},
...

可以看出這個(gè)路由沒有什么區(qū)別，唯一值得注意的一點(diǎn)就是里詳情頁面，是一個(gè)動(dòng)態(tài)的路由，從詳情頁面跳轉(zhuǎn)到項(xiàng)目列表我們需要相應(yīng)的id信息，但是此時(shí)id我們不能固定填入，而是一個(gè)動(dòng)態(tài)的值。

修改detail頁面

在milestone頁面監(jiān)聽beforeRouteEnter事件

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

在beforeRouteEnter事件中修改meta信息，從而更新面包屑的導(dǎo)航路由。

主要的實(shí)現(xiàn)思路就是在目標(biāo)頁面添加beforeRouteEnter事件，然后更改其meta配置信息，從而達(dá)到更改面包屑導(dǎo)航路徑。

如果你還有更好的解決辦法，歡迎留言。

以上這篇Vue 解決多級(jí)動(dòng)態(tài)面包屑導(dǎo)航的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: