vue-router 利用 $route 的 matched 属性实现面包屑效果
我们以一个固定的路由表来说明let routes = [{path: '/',component: () => import('../pages/layout/Layout.vue'),children: [{name: 'pageA',path: 'a',component: PageA,children: [{name: '..
·
-
我们以一个固定的路由表来说明
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>
更多推荐
所有评论(0)