问如何在Vue中使用Vue-Router设置URL查询参数

EN

以下是文档中的示例：

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

参考：

https://router.vuejs.org/en/essentials/navigation.html

如那些文档中所提到的，

工作原理如下

因此，您似乎在您的示例代码中找到了正确的方法。但我认为你可能需要包括

或者

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

或者

，它看起来并不是很有意义。

这是我现在的理解：

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

或者

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

这可能是您的示例代码中缺少的部分。

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

你有没有试过使用

命名路由

在这种情况下？您有动态路由，并且更容易分别提供参数和查询：

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

然后在你的方法中：

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

从技术上讲，上面和

，但在命名路由上提供动态参数比组成路由字符串更容易。但在这两种情况下，都应该考虑查询参数。在这两种情况下，我都找不到处理查询参数的方式有任何问题。

进入路径后，您可以获取动态参数，如下所示

查询参数为

..。

无需重新加载

页面或刷新dom，

能胜任这项工作。

在您的组件中或其他地方添加此方法即可完成此操作：

addParamsToLocation(params) {
  history.pushState(
    {},
    null,
    this.$route.path +
      '?' +
      Object.keys(params)
        .map(key => {
          return (
            encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
          )
        })
        .join('&')
  )
}

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

在window.history堆栈中推送带有查询参数的当前位置。

将查询参数添加到当前位置

在不推动新的历史的情况下

条目，使用

取而代之的是。

使用Vue 2.6.10和Nuxt 2.8.1进行测试。

使用此方法时要小心！

Vue路由器不知道url已更改，因此它不会在pushState之后反映url。

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

基于：

https://github.com/vuejs/vue-router/issues/1631