动态路由删除缓存

分析

使用场景 动态路由 登陆退出 清除除路由白名单外的其他缓存路由
实现方式：
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())