vue动态路由

最新推荐文章于 2024-09-12 19:34:30 发布

L1AK

最新推荐文章于 2024-09-12 19:34:30 发布

阅读量315

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43357874/article/details/113899187

版权

Vue 动态路由权限管理 Vuex 历史模式

关键词由CSDN通过智能技术生成

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

https://www.bilibili.com/video/BV1H54y1S7mD?p=2&spm_id_from=pageDriver

https://www.cnblogs.com/IrisRise/p/10563441.html

初始化路由（使用公用路由表）

const createRouter = () =>
new Router({
  routes,
  mode: 'history'
})

const router = createRouter()

根据用户信息（权限）添加路由

if(!store.state.user.hasGetInfo)
        {
          const userRole = store.state.user.role
        
          const addRouter = userRole === 'city'?[...cityRouters]:[...provinceRouters]
          router.addRoutes(addRouter)  // 添加用户专有路由
          router.options.routes = router.options.routes.concat(addRouter) //vuex2.0 不自动更新router.options.routes
          store.state.app.menuRouters = router.options.routes // 修改vuex中路由表
          store.state.user.hasGetInfo = true
        }

退出清空路由表

export function resetRouter(){
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
  router.options.routes = routes
  store.state.app.menuRouters = routes
}