vue-router怎么动态配置，比如根据用户权限不同显示路由

Z时代
2024-01-10
分类：技术分享

1、router" title="vue-router">vue-router怎么动态配置，比如根据用户权限不同显示路由

图片描述

如上图，我想根据用户权限不同，动态添加删除菜单

下面是路由配置

const routes = [
    {
    path: '/',
    component: Home,
    name: '系统管理',
    iconCls: 'el-icon-setting',
    children: [
      { path: '/Page12', component: Page12, name: '组织机构' },
      { path: '/Page9', component: Page9, name: '管理员' },
      { path: '/Page11', component: Page11, name: '用户管理' },
      { path: '/Page7', component: Page7, name: '用户反馈' },
      { path: '/Page6', component: Page6, name: '关于我们' },
      { path: '/Page8', component: Page8, name: '联系我们' },
      { path: '/Page10', component: Page10, name: '个人中心' }
    ]
  }
]

回答：

路由就是按照你这样配置的，然后你的菜单单独配置：放在store里面，根据用户权限配置菜单。如果更进一步，可以配置accessMenu,就好像这样

router.beforeEach ((to, from, next) => {
  let accessMenu = store.state.env.accessMenu
  let hasLogin = store.state.env.haslogin
  if (to.name === 'login') {
    next()
  } else {
    if (accessMenu.length === 0 || hasLogin === false) {
      // 跳转到登录页
      next({name: 'login'})
    } else {
      if (to.name === 'home') {
        next()
      } else {
        // 查看路径是否在允许的路由内
        const toName = to.name
        console.log(toName)
        if (!toName) {
          next({name: 'home'})
        } else {
          let canGo = findName(toName,accessMenu)
          console.log(canGo)
          if (canGo) {
            next()
          } else {
            next({name: 'home'})
          }
        }
      }
    }
  }})