登录成功后跳首页，写了句 this.$router.push('/home')，页面没动，控制台还报了句重复导航。router.push 的几种参数形式，实际项目里天天踩坑的就三处。

三种传参形式

  • 字符串写法：push('/home')，最省事，缺点是带不了参数。
  • path 加 query：push({ path: '/search', query: { kw: '耳机' } })，参数落在地址栏问号后面，刷新、分享都还在。
  • name 加 params：push({ name: 'user', params: { id: 5 } })，走命名路由，vue-router 4 里路由没配动态段的话，params 一刷新就丢。

对象里 path 和 params 别一起传，params 会被直接忽略，想带参就换 query，或者把路由配成 /user/:id 这种动态段。

重复导航的报错

连点两次同一个链接，vue-router 3 会报 NavigationDuplicated，功能没坏但控制台很吵，push 后面接个空 catch 就安静了，4.x 已经不再往外抛。跳之前先读 route.path 和目标对比一下，也能少一次无效跳转。

vue3 setup 和 React 里的差别

vue-router 4 在 setup 里要先 const router = useRouter() 才能调 router.push，组件外用不了这个 hook，得从入口文件把 router 实例导出去。React Router 6 不叫 push 了，函数叫 navigate，语义一样：都是往历史栈压一条记录，浏览器返回键能回到上一页；换成 replace 就是替换当前记录，返回键会跳过它，登录页跳完不想让人退回去就用这个。

取舍原则：参数要能分享、能刷新就上 query；参数只是定位资源又不想露在地址栏，就配动态路由段，别指望 params 传复杂对象能一直活着。