Vue Router beforeEach守卫偶现异常行为技术问询

嘿，我一眼就看出你遇到的异常问题根源了！你的beforeEach导航守卫里存在一个关键的小错误——你调用了两次next()，这直接导致了地址栏操作时的导航混乱。

问题代码的核心问题 #

来看你这段守卫代码：

router.beforeEach(function(to, from, next) {
  if (to.path === '/bar') {
    next('/');
  }
  next();
});

当访问/#/bar时，虽然你通过next('/')发起了重定向，但之后的next()依然会执行。Vue Router的导航守卫规则是：next()只能被调用一次，多次调用会让路由系统收到冲突的导航指令——新标签页首次访问时可能暂时正常，但后续地址栏的任何操作（比如手动修改地址、前进后退）都会触发异常。

修正后的代码 #

你只需要确保next()只执行一次即可，有两种常见的写法：

写法1：用return终止后续代码

router.beforeEach(function(to, from, next) {
  if (to.path === '/bar') {
    return next('/'); // 执行重定向后直接返回，避免后续next()执行
  }
  next();
});

写法2：用else分支区分逻辑

router.beforeEach(function(to, from, next) {
  if (to.path === '/bar') {
    next('/');
  } else {
    next(); // 只有不满足重定向条件时才执行
  }
});

为什么这样能解决问题 #

修正后，每次导航只会触发一次next()调用，路由系统能清晰处理导航逻辑，不管是首次访问还是后续地址栏的操作，都能按照预期执行重定向或正常导航。

内容的提问来源于stack exchange，提问作者Billy Monk