动态路由跳转失效?原来是 next() 与 return 的用法搞反了!

29 阅读1分钟

Vue2(Vue Router 3.x) :守卫基于「回调模式」,必须通过 next() 方法控制导航,不支持返回值控制;
Vue3(Vue Router 4.x) :守卫基于「返回值模式」,支持直接返回路径字符串 / 路由对象(如 return '/login'),此时会自动触发新导航周期(这是 Vue3 的新特性,Vue2 不兼容)。

触发新导航周期的 return 写法:仅两种

  • return '路径字符串'(如 return '/dashboard');
  • return 路由对象(如 return { ...to, replace: true },推荐);

不触发新导航周期的 return 写法

  • return true/return undefined/ 无值返回(继续当前周期);
  • return false(终止当前周期,不新启);

核心差异:Vue3 支持「返回值控导航」,Vue2 仅支持「next() 回调控导航」,return 'xx' 是 Vue3 专属有效写法。