Vue Router 3.0.1路径跳转异常问题求助

这问题我太熟了！核心原因就是你的router-link用了相对路径而非绝对路径，导致在嵌套路由页面跳转时路径被错误拼接了。

当你处于/message/somemessage页面时，点击不带斜杠开头的signin链接，Vue Router会默认把它当成当前路径的子路径，自然就拼成了/message/signin。

快速解决方案 #

直接把router-link的to属性改成以斜杠开头的绝对路径：

<router-link to="/signin">Sign In</router-link>

这样无论你在哪个页面，点击后都会直接跳转到根路径下的signin路由，也就是你预期的https://localhost:8080/signin。

更可靠的替代方案（推荐） #

使用命名路由来跳转，完全规避路径拼接的问题。先确保你的路由配置里给signin路由设置了name：

// 路由配置示例
const routes = [
  // ...其他路由
  {
    path: '/signin',
    name: 'SignIn', // 给路由命名
    component: () => import('../views/SignIn.vue')
  }
]

然后在router-link里通过name来跳转：

<router-link :to="{ name: 'SignIn' }">Sign In</router-link>

这种方式基于路由名称匹配，不受当前页面路径影响，在复杂项目里能减少很多路径相关的坑。

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