关于vue.js:Vuex路由独享守卫实现根据条件重定向

26次阅读

共计 939 个字符,预计需要花费 3 分钟才能阅读完成。

如何在进入某页面之前通过条件判断是否跳转至其它页面,当时把条件标识存储在 vuex 中,后在 router 中通过路由守卫管制页面跳转,上面来看一下具体实现:

vuex(省略局部代码):

  state:{platformVer:"" // 平台版本},

  mutations: {setPlatformVer(state, platformVer) {state.platformVer = platformVer; // 更新 state 值},
    }
  actions: {setPlatformVer(state) {
      axios.get({
          params: {
            code: "AuthorityPlatformVersion", // 获取权限平台标识版本
            data: {}} // 参数
        })
        .then(res => {state.commit("setPlatformVer", res);
        });
    }
  }

vuexaction 中通过 setPlatformVer 调用接口拿到数据后commit setPlatformVer 数据到 vuex 中

在页面登录后或初始加载页面时触发Vuex Action 的 setPlatformVer:

 this.$store.dispatch("setPlatformVer");

router 路由表:

   {
        path: "MenuManagementOld",
        meta: {title: "菜单治理 old"},
        component: resolve =>
          require(["@/views/system/MenuManagementOld"], resolve)
   },
 
   {
        path: "MenuManagement",
        meta: {title: "菜单治理"},
        component: resolve =>
          require(["@/views/system/MenuManagement"], resolve),
        beforeEnter: (to, from, next) => {if (store.state.platformVer == "2") { // 2 是老版本 跳转到老平台页面
           next("/system/MenuManagementOld");
         }
          next(); // 否则持续跳转默认页面 MenuManagement}
      },

beforeEnter当进入此路由时判断,如为老版本跳到其它页面。

正文完
 0