编程式导航跳转后页面没反应是怎么回事？

シ贝贝提问于 2026-03-07 18:52:21 阅读 50

前端

我在用 Vue Router 做登录后的跳转，调用 router.push 没报错，但页面就是不跳转，URL 也没变，这是啥情况？

我试过传字符串路径和对象形式，都不行。控制台也没任何错误，组件也没重新渲染。是不是我哪里写错了？

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    
    const handleLogin = () => {
      // 模拟登录成功
      router.push('/dashboard');
    };

    return { handleLogin };
  }
}

我来解答赞 3 收藏

反馈

1 条解答

❤绍懿 Lv1

这问题我遇到过，八成是路由守卫或者导航守卫里拦截了。先别急，我给你几个排查方向：

1. 检查你的路由守卫是不是有 next() 没调用：

router.beforeEach((to, from, next) => {

  // 确保有调用 next()

  next()

})

2. 试试用 router.replace 替代 push，有时候浏览器历史记录会有奇怪问题：
router.replace('/dashboard')

3. 最简单粗暴的方式，直接看路由实例是不是同一个：

console.log(router) // 确保不是空的

console.log(router === useRouter()) // 应该返回 true

4. 还有个常见坑是重复注册路由，检查 main.js 里是不是多次调用了 createRouter

我一般遇到这种问题就直接上 debugger 打断点，效率更高。你也可以在 push 后面加个 then/catch 看看 promise 的状态：
router.push('/dashboard').then(() => {}).catch(e => console.log(e))

如果还不行，八成是别的地方把路由拦截了，建议全局搜一下 beforeEach/beforeResolve 这些守卫。

2026-03-07 19:04