Vue - $route matched 属性实现面包屑导航

短命女 2022-10-04 15:44 1334阅读 0赞

## 前言 ##

如下图所示，实现这样一个面包屑导航，实际利用 `$route` 的 `matched` 属性，非常简单。  
![在这里插入图片描述][20210712104141925.png]

## 路由表 ##

首先，定义一个路由表用以后续实现演示：

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'` 这 3 个 `path` 的路由信息。

然后可以直接利用路由信息来渲染面包屑导航。

<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() { // data navList: [] }, watch: { // 监听路由(每次变化更新面包屑导航) $route: { handler() { this.getNavList() }, immediate: true } }, mounted(){ // 首次进入 this.getNavList() }, methods: { // 渲染面包屑导航 getNavList() { const data = this.$route.matched.filter(item => item.name); this.navList = data } } } </script>

log 一下 `this.$route.matched.filter(item => item.name)` ！

配合 `elementUI` `<el-breadcrumb>` 组件更加便捷，但要做一些修改。

[20210712104141925.png]: /images/20221004/55fd4ba9597547e480cd9a40b28d676b.png