vue-router 动态修改路由参数

  • Z时代
  • 2024-03-09
  • 分类：IT

vue-router 动态修改路由参数

路由地址后缀 /test?regionId=sj
用户信息中有匹配的行政区划权限数组 xzqh: ['sj','hz'], 且有字段表示改用户默认归属的行政区划 regionId: sj
当手动修改地址改成 /test?regionId=hz，因为 regionId 在符合的权限数组中，跳转到 /test?regionId=hz
当手动修改地址改成 /test?regionId=nb，重定向地址到 /test?regionId=sj

请问路由导航中这个逻辑如何实现
我在 beforeEach 钩子里判断 regionId 不符合权限数组后，配置 to.query.regionId ，路由地址并不会改变

回答：

既然是权限，就不要放到URL中，这样不安全，可以放到vuex中

回答：

router.replace

回答：

手动修改路由参数，当它不符合某些条件，限制它跳转，重定向到默认路由

router.beforeEach((to, from, next) => {
       // 获取用户权限，允许操作哪些节点
      let permissionKey = xxx
      // 获取用户默认归属哪个节点
      let defaultRegion = xxx
      // 手动修改的 regionId 不在权限域内, 重定向到默认
      if(permissionKey.indexOf(to.query.regionId) === -1 && to.query.regionId !== defaultRegion?.key) {
      // 这里重定向到指定的
          router.push({ name: to.name, query: Object.assign(to.query, {
          regionId:  defaultRegion?.key
        })})
    next()
})

以上是 vue-router 动态修改路由参数 的全部内容， 来源链接： utcz.com/p/937580.html

回到顶部