vue-router 利用 $route 的 matched 属性实现面包屑效果

最新推荐文章于 2023-08-21 23:16:32 发布

原创最新推荐文章于 2023-08-21 23:16:32 发布 · 2w 阅读

61 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

11 篇文章

订阅专栏

我们以一个固定的路由表来说明

let routes = [
  {
    path: '/',
    component: () => import('../pages/layout/Layout.vue'),
    children: [
      {
        name: 'pageA',
        path: 'a',
        component: PageA,
        children: [
          {
            name: 'pageAA01',
            path: 'aa-01',
            component: PageAA01
          },
          {
            name: 'pageAA02',
            path: 'aa-02',
            component: PageAA02
          },
          {
            name: 'pageAA03',
            path: 'aa-03',
            component: PageAA03
          },
        ]
      }
    ]
  }
]

matched 顾名思义就是匹配，假如我们目前的路由是/a/aa-01，那么此时 this.$route.matched匹配到的会是一个数组，包含 '/'，'/a'，'/a/aa-01'，这三个path的路由信息。然后我们可以直接利用路由信息渲染我们的面包屑导航。

//demo
<template>
	<div class="nav-wrap">
    <router-link v-for="(item, index) in navList" :key="index">
  		{{ item.name }} {{index !== list.length - 1 ? '/' : ''}}
  	</router-link>
  </div>
</template>
<script>
	export default {
    data() {
      navList: []
    },
    watch: {
      $route: {
        handler() {
          this.getNavList()
        },
        immediate: true
      }
    },
    methods: {
      getNavList() {
        this.$route.matched.filter(item => item.name);
      }
    }
  }
</script>