好吧，所以我一直试图添加一个参数到我现有的url wich已经有一个星期的params现在lol， 原始网址:http://localhost:3000/somelink?param1=test1 我一直在尝试:

this.$router.push({path: this.$route.path, query: {param2: test2} });

这段代码只是删除param1并变成 http://localhost:3000/somelink?param2=test2

为了解决这个问题，我使用了fullPath

this.$router.push({path: this.$route.fullPath, query: {param2: test2} });

现在我成功地在旧的参数和结果添加参数

http://localhost:3000/somelink?param1=test1&param2=test2

无需重新加载页面或刷新dom，历史记录。pushState可以做这个工作。 在你的组件或其他地方添加这个方法:

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

因此，在组件的任何地方，调用addParamsToLocation({foo: 'bar'})在窗口中推当前位置的查询参数。历史堆栈。

要将查询参数添加到当前位置，而不推入新的历史记录项，请使用history。replaceState代替。

用Vue 2.6.10和Nuxt 2.8.1测试。

使用这种方法要小心! Vue路由器不知道url已经改变，所以它不会在推送状态后反映url。

下面是文档中的例子:

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

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

正如那些文档中提到的，路由器。Replace工作原理类似router.push

因此，您似乎在您的示例代码中有它的问题。但我认为你可能还需要包括名称或路径参数，这样路由器就有一些路由可以导航到。如果没有名称或路径，它看起来没有多大意义。

这是我现在的理解:

查询是可选的路由器-一些额外的信息组件构造的视图 名称或路径是必须的-它决定在<router-view>中显示什么组件。

这可能是示例代码中所缺少的内容。

编辑:评论后的附加细节

在这种情况下，您尝试过使用命名路由吗?你有动态路由，并且单独提供参数和查询更容易:

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

然后在你的方法中

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

从技术上讲，上面的和这个。$router没有区别。替换({path: "/user/123"， query:{q1: "q1"}})，但是在命名路由上提供动态参数比组成路由字符串更容易。但在任何一种情况下，都应该考虑到查询参数。在这两种情况下，我都没有发现处理查询参数的方式有任何错误。

在你进入路由后，你可以获取动态参数，像这样。$route.params。Id和你的查询参数如下。$route.query.q1

你也可以只使用浏览器的window.history.replaceState API。它不会重新挂载任何组件，也不会导致冗余导航。

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

更多信息请点击这里。

这与使用Composition API是等价的

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

router.push({ path: 'register', query: { plan: 'private' }})
</script>

您还可以使用Vue devtools以确保它按预期工作(通过检查您所处的给定路由)，如下所示:https://stackoverflow.com/a/74136917/8816585

更新

这将同时挂载/卸载组件。一些普通的JS解决方案仍然是实现这一目的的最佳方式。

与RouterLink

/ /与RouterLink < router-link :to="{name:"router-name"， prams:{paramName: paramValue}}" > 路线的文本 < / router-link > / /方法 方法(){ 美元。路由器。push({name:'route-name'， params:{paramName: paramValue}}) }

与方法

methods(){
  this.$router.push({name:'route-name', params:{paramName, paramValue}})
}