vue路由能否根据条件判断来决定是否存在？

  • Z时代
  • 2024-02-21
  • 分类：IT

vue路由能否根据条件判断来决定是否存在？
求各位大佬指点一二

回答：

一般通过后端返回的用户角色，都使在路由完成初始化之后返回的，使用 addRoute - API 参考 | Vue Router 即可。按照后端返回的角色信息去动态添加到路由表中就可以了，现在很多的Admin框架都是这样的思路，例如说 ? ant-design-vue-pro/permission.js at master · vueComponent/ant-design-vue-pro

如果说是固定权限的，那么可以在项目初始化时就处理好，按照不同权限 push 进路由表然后再初始化路由。具体操作思路可以借鉴肉大的这篇文章 ? 2023 Git 必备知识（三）：小知识推荐配置与小技巧 – 山维空间 中关于给功能添加开关，然后在编译阶段进行调整，针对不同的用户，输出包含不同功能的代码。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

回答：

[{
        path: "dashboard",
        name: "Dashboard",
        component: () => import("@/views/Dashboard.vue"),
        meta: {
          title: "数据看板",
          role:'1'
        },
},...]
router.beforeEach(async (to, from, next) => {
      /* 路由守卫*/
      if (!store.getters.userinfo) {
        const { data } = await api()//接口返回的用户信息 role
        const asyncRoutes = //导入路由
        const filterAsyncRoutes = filterAsyncRouter(asyncRoutes,data.role) //编写规则过滤路由
        filterAsyncRoutes.forEach((routes) => {
          router.addRoute(routes)//动态添加路由到router
        })
        store.commit("setRoutes", filterAsyncRoutes)
        return next(to.fullPath)
    } else {
      /* 没有登录 */
      next({
        path: "/login"
      })
    }
  })

以上是 vue路由能否根据条件判断来决定是否存在？ 的全部内容， 来源链接： utcz.com/p/933928.html

回到顶部