我试图在更改输入字段时将查询参数设置为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 },
]
})
以下是文档中的示例:
// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
参考:https://router.vuejs.org/en/essentials/navigation.html
正如这些文档中提到的，router.replace的效果与router.push类似
所以，您的示例代码中似乎有这个问题.但我认为您可能还需要包含name或path参数，这样路由就有了导航的路径.如果没有name或path，它看起来就没有什么意义.
这是我目前的理解:
query对于路由是可选的-组件构造视图的一些附加信息name或path是强制性的——它决定在<router-view>中显示哪个组件.这可能是示例代码中缺少的东西.
EDIT: Additional details after comments
你在这种情况下试过用named routes吗？您有动态路由，单独提供参数和查询更容易:
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.