我试图用Vue-router在改变输入字段时设置查询参数，我不想导航到其他页面，但只想修改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 },
]
})
当前回答
vue路由器在更新时不断重新加载页面，最好的解决方案是
const url = new URL(window.location);
url.searchParams.set('q', 'q');
window.history.pushState({}, '', url);
其他回答
这与使用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解决方案仍然是实现这一目的的最佳方式。
好吧，所以我一直试图添加一个参数到我现有的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¶m2=test2
对于添加多个查询参数，这对我来说是有效的(从这里https://forum.vuejs.org/t/vue-router-programmatically-append-to-querystring/3655/5)。
上面的答案很接近……不过是客体。赋值它会改变这个。$route。当执行Object.assign时，确保第一个参数是{}
this.$router.push({ query: Object.assign({}, this.$route.query, { newKey: 'newValue' }) });
下面是文档中的例子:
// 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
this.$router.push({ query: Object.assign(this.$route.query, { new: 'param' }) })
