在 nuxt 中使用路由对象替换路径答案

【问题标题】：replacing path using route object in nuxt在 nuxt 中使用路由对象替换路径
【发布时间】：2021-06-25 21:12:07
【问题描述】：

我想去这个网址：

myApp.com/search-page?name%5Bquery%5D=value

当我在主页myApp.com 上时，以下代码非常适用：

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

但是如果我在另一个页面上已经有这样的路径：

myApp.com/movies/id

当我使用与$router.push 相同的代码时，它会将我带到这个网址：

myApp.com/movies/search-page?name%5Bquery%5D=value

如您所见，我们不希望在 URL 中有一个额外的 movies/！无论我当前的路径（URL）是什么，我怎样才能做到这一点，我的$router.push 方法将我带到：

myApp.com/search-page?name%5Bquery%5D=value

【问题讨论】：

【解决方案1】：

您在$router.push 中使用path。如果您在嵌套页面中，您还需要更改路径值。

改为使用name，这样您就不必指定路径级别

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

在 nuxt 中，路由名称基本上是为降低字符串和连字符生成的文件夹名称。因此，如果您有这样的文件夹并且想要访问电影 id 路由

pages/
--| movies
-----| _id.vue

你可以通过

this.$router.push({
      name: "movies-id",
      params: { 
         id: 1
      }    
});

【讨论】：