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

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

   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
             },
           ]
         }
       ]
     }
   ]
   

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

   //demo