分析
使用场景 动态路由 登陆退出 清除除路由白名单外的其他缓存路由
实现方式:
1、路由初始化
2、路由遍历删除(思路)
1、路由初始化
// 建立一个初始化路由 routes.baseRoutes基础路由
const createRouter: any = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: routes.baseRoutes,
})
// export default router
const router: any = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: routes.baseRoutes,
})
// 路由守卫
router.beforeEach(async (to: any, from: any, next: any) => {
if (!getToken() && !isWhiteList(to.path)) {
// 路由初始化
router.matcher = createRouter.matcher
}
}
2、路由遍历删除(思路 使用removeRoute进行路由删除 此方法只适用于vue-router 4.x以上版本)
if (!getToken() && !isWhiteList(to.path)) {
// 路由初始化
// router.matcher = createRouter.matcher
const removeArr = router.getRoutes().filter((item: any) => {
return !isWhiteList(item.path)
})
// vue3 router4中的方法当前不适用
removeArr.forEach((route: any) => {
router.removeRoute(route.name)
})
}
// console.log('router.getRoutes()', router.getRoutes())