|
问题：
项目需要根据用户权限设置动态路由，获取用户权限后，根据权限筛选可访问路由，使用addRoute添加路由，
修改用户权限后，需要清除已经添加的动态路由，再重新添加可访问路由
vue-routerV2:
方法：重新赋值matcher:
// router/index.js
const createRouter = () => new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: baseRoute
})
const router = createRouter()
// 重置路由函数
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // 重置路由
}
export default router
vue-routerV3:
方法：
addRoute函数会返回移除路由的方法，通过调用该方法移除路由，
保存 添加动态路由addRoute时返回的函数 在一个数组中，存储再vuex中，
在移除时依次调用移除路由函数，
// router/index.js
/**
* 添加动态路由函数（把添加路由addRoute返回的函数存储在store用于移除路由）
* @param {array} routes 筛选出来的需要添加的路由数组
*/
export function addAsyncRouter(routes){
let removeRouteFuns = []
routes.forEach(item => {
let removeRouterfun = router.addRoute(item)
removeRouteFuns.push(removeRouterfun)
});
store.commit('permission/SET_ASYNCROUTES',removeRouteFuns) // 存储在vuex中
}
/**
* 移除动态路由函数
*/
export function resetAsyncRouter(){
// 取出移除函数 依次执行
store.getters.asyncRoutes.forEach(fn => {
fn()
});
}
|