-
我们以一个固定的路由表来说明
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>
vue-router 利用 $route 的 matched 属性实现面包屑效果
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
