vue-router 在beforeEach中添加每次跳转带上的参数，报错问题

最新推荐文章于 2025-02-12 17:09:19 发布

原创最新推荐文章于 2025-02-12 17:09:19 发布 · 5.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue-router #守卫导航 #vue路由添加参数 #vue #beforeEach

js 同时被 2 个专栏收录

19 篇文章

订阅专栏

vue

16 篇文章

订阅专栏

博客主要讲述在Vue守卫导航中添加参数，路由跳转时出现'Redirected when going from “/a” to “/b” via a navigation guard'问题，并给出了解决办法，即添加最后两个方法。

在守卫导航中添加参数，在路由跳转时会出现下面问题。
Redirected when going from “/a” to “/b” via a navigation guard. at createRouterError (vue-router.esm.js?8c4f:2008)

解决方法：添加下面最后两个方法

router.beforeEach((to, from, next) => {
  // 修改标题
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  if (sessionStorage.getItem('appId') && sessionStorage.getItem('token') && !to.query.appid) {
    next({
      path: to.path,
      query: {
        ...to.query,
        appid: sessionStorage.getItem('appId'),
        grg_token: sessionStorage.getItem('token'),
      },
    });
  } else {
    next();
  }
});

// 解决上面跳转加参数报错问题
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject);
  return originalPush.call(this, location).catch(err => err);
};

// 修改路由replace方法,阻止重复点击报错
const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch(err => err);
};