Nuxt中使用$router.push跳转路径出现多余URL前缀如何解决

问题原因 #

你当前使用的是相对路径写法：path: "search-page" 没有前导斜杠，Vue Router 会将相对路径拼接在当前激活路由的路径后，所以在 /movies/id 这类深层路径下就会自动加上movies/前缀。

解决方案 #

方案1：使用绝对路径 #

只需要在path前加前导斜杠/，声明为根绝对路径即可，无论当前处于哪一层路径，都会从域名根目录开始解析：

this.$router.push({ path: "/search-page", query: { name: { query: `${this.value}` } } });

方案2：使用命名路由（更推荐） #

如果你的路由配置中给搜索页路由设置了name属性，参考路由配置如下：

// 路由配置文件
const routes = [
  {
    path: '/search-page',
    name: 'SearchPage', // 给路由自定义命名
    component: SearchPage
  }
]

跳转时直接指定路由名称即可，不需要手动写路径，即使后续修改搜索页的路径也不需要调整跳转代码：

this.$router.push({ name: "SearchPage", query: { name: { query: `${this.value}` } } });

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