Javascript 如何使用Vue路由器在Vue中设置URL查询参数

我试图在更改输入字段时设置查询参数，我不想导航到其他页面，只想修改同一页面上的url查询参数，我的操作如下：

this.$router.replace({ query: { q1: "q1" } })

---

但这也会刷新页面并将y位置设置为0，即滚动到页面顶部。这是设置URL查询参数的正确方法还是有更好的方法

---

编辑：

这是我的路由器代码：

export default new Router({
  mode: 'history',
  scrollBehavior: (to, from, savedPosition)  => {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return {x: 0, y: 0}
    }
  },
  routes: [
    ....... 
    { path: '/user/:id', component: UserView },
  ]
})

---

以下是文档中的示例：

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

参考：

正如这些文档中提到的，

router.replace

的工作原理与

router.push

因此，您的示例代码中似乎有这个问题。但我认为您可能还需要包含

name

或

path

参数，以便路由器有一些导航路径。如果没有

名称

或

路径

，它看起来就没有什么意义

这是我目前的理解：

• query

  对于路由器是可选的-组件构造视图的一些附加信息

• 名称

  或

  路径

  是必需的-它决定在
  中显示哪个组件

这可能是示例代码中缺少的东西

编辑：评论后的其他详细信息

在这种情况下，您是否尝试过使用命名路由？您有动态路由，单独提供参数和查询更容易：

routes: [
    { name: 'user-view', path: '/user/:id', component: UserView },
    // other routes
]

然后在你的方法中：

this.$router.replace({ name: "user-view", params: {id:"123"}, query: {q1: "q1"} })

从技术上讲，上述内容与

this.$router.replace（{path:/user/123”，query:{q1:“q1”}}}）之间没有区别。

，但在命名路由上提供动态参数比编写路由字符串更容易。但在这两种情况下，都应该考虑查询参数。在这两种情况下，我都没有发现处理查询参数的方式有任何错误

---

进入路由后，您可以将动态参数提取为

this.$route.params.id

，将查询参数提取为

this.$route.query.q1

实际上，您可以像这样推送查询：

this.$router.push（{query:{plan:'private'}）

---

基于：

要一次设置/删除多个查询参数，我使用以下方法作为全局混合的一部分（

此

指向vue组件）：

---

无需重新加载页面或刷新dom，

history.pushState

即可完成此任务。
将此方法添加到您的组件或其他位置以实现此目的：

addParamsToLocation（参数）{
历史，国家(
{},
无效的
这是$route.path+
'?' +
Object.keys（参数）
.map（键=>{
返回(
encodeURIComponent（键）+'='+encodeURIComponent（参数[键]）
)
})
.join（“&”）
)
}

因此，在组件中的任何位置，调用

addParamsToLocation（{foo:'bar'}）

以在window.history堆栈中使用查询参数推送当前位置

要将查询参数添加到当前位置而不推送新的历史记录条目，请改用

history.replaceState

使用Vue 2.6.10和Nuxt 2.8.1进行测试

小心使用此方法

---

Vue Router不知道url已更改，因此它不会反映pushState后的url。

如果您试图保留某些参数，而更改其他参数，请确保复制Vue Router查询的状态，而不要重复使用它

这是可行的，因为您正在制作未引用的副本：

  const query = Object.assign({}, this.$route.query);
  query.page = page;
  query.limit = rowsPerPage;
  await this.$router.push({ query });

而以下情况将导致Vue Router认为您在重复使用相同的查询，并导致

导航重复

错误：

  const query = this.$route.query;
  query.page = page;
  query.limit = rowsPerPage;
  await this.$router.push({ query });

当然，您可以分解查询对象，如下所示，但是您需要知道页面中的所有查询参数，否则您可能会在结果导航中丢失它们

  const { page, limit, ...otherParams } = this.$route.query;
  await this.$router.push(Object.assign({
    page: page,
    limit: rowsPerPage
  }, otherParams));
);

注意，虽然上面的示例是针对

push（）

，但这也适用于

replace（）

---

使用vue router 3.1.6进行测试。

添加多个查询参数，这对我来说很有用（从这里开始）

上面的答案很接近…虽然使用Object.assign，它将改变此值。$route.query，但这不是您要执行的操作…在执行Object.assign时，请确保第一个参数为{}

---

我通常使用history对象进行此操作。它也不会重新加载页面

例如：

history.pushState({}, '', 
                `/pagepath/path?query=${this.myQueryParam}`);

---

下面是我的简单解决方案，可以在不刷新页面的情况下更新URL中的查询参数。确保它适用于您的用例

constquery={…this.$route.query，someParam:'some value'}；
这个.$router.replace（{query}）；

我的解决方案，无需刷新页面，无需出错

避免了到当前位置的冗余导航

    this.$router.replace(
      {
        query: Object.assign({ ...this.$route.query }, { newParam: 'value' }),
      },
      () => {}
    )

---

您也可以只使用浏览器

window.history.replaceState

API。它不会重新安装任何组件，也不会导致冗余导航

window.history.replaceState(null, null, '?query=myquery');

---

我也尝试给出路径，但这并没有停止滚动到页面顶部，我还使用路由器选项编辑了问题，可能需要进行一些更改。您的查询参数是否打算滚动到文档中的正确位置？就像你的另一个问题一样？不，我只想在URL中添加查询参数，我不想在这里滚动。我只是在本地设置中测试了选项，查询参数正常工作。我能够导航到新路由并访问查询参数，如更新的答案所示。所以，问题是-你不想让它滚动？或者问题是整个应用程序再次刷新？所以我在同一个页面上，当我选择一些输入时，我想将它们添加到URL中，但当我这样做时，就会出现滚动。滚动是我的问题。我不想导航到其他页面，我只想在同一个页面上毫无保留地添加/修改url查询参数。不幸的是，这会导致

错误：避免了冗余的navi
history.pushState({}, '', 
                `/pagepath/path?query=${this.myQueryParam}`);

    this.$router.replace(
      {
        query: Object.assign({ ...this.$route.query }, { newParam: 'value' }),
      },
      () => {}
    )

window.history.replaceState(null, null, '?query=myquery');