踩坑记2 vue-router4 路由获取、匹配、router.afterEach() 等

2021.7.8

路由、面包屑

坑4（方式，路由获取，vue3，vue-router4）：与vue2的路由获取方式不同

（this.$route、this.$route.matched），

vue3的路由获取方法如下：

import { useRouter } from 'vue-router'

...

const router=useRouter()

const routes=router.getRoutes() //所有活跃的路由记录

const currentRoute=router.currentRoute  //当前路由对象

...

console.log(currentRoute.value.matched)  //当前路由对象嵌套的路由记录

坑5（方式，路由匹配，vue3，vue-router4）：与vue2方式不同

（path: '*'），以下为vue3中未定义页面匹配到404页的方法。

{ path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },

坑6（路由，组件，vue-router4）：使父路由导航到404页，子路由正常显示，方案如下。

父路由使用一致的布局组件Layout(也可只放一个<router-view />组件)并重定向到404页，子路由正常使用组件即可。

坑7（路由变化，vue-router4，vue3）：在Header组件中设置面包屑el-breadcrumb，通过router.afterEach()，路由变化即改变显示。

const router=useRouter()

const routeList=ref(null)



router.afterEach(to => {

    routeList.value=router.currentRoute.value.matched.filter(r=>{

        return r.path!=='/index'

    })

    console.log(routeList.value)

});

by 莫得感情踩坑机(限定)