我试图用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 },
]
})
当前回答
实际上你可以这样推query: this.$router。推送({query: {plan: 'private'}})
基于:https://github.com/vuejs/vue-router/issues/1631
其他回答
我通常使用history对象。它也不会重新加载页面。
例子:
history.pushState({}, '',
`/pagepath/path?query=${this.myQueryParam}`);
为了一次设置/删除多个查询参数，我最终使用了以下方法作为全局mixins的一部分(这指向vue组件):
setQuery(query){
let obj = Object.assign({}, this.$route.query);
Object.keys(query).forEach(key => {
let value = query[key];
if(value){
obj[key] = value
} else {
delete obj[key]
}
})
this.$router.replace({
...this.$router.currentRoute,
query: obj
})
},
removeQuery(queryNameArray){
let obj = {}
queryNameArray.forEach(key => {
obj[key] = null
})
this.setQuery(obj)
},
实际上你可以这样推query: this.$router。推送({query: {plan: 'private'}})
基于:https://github.com/vuejs/vue-router/issues/1631
vue路由器在更新时不断重新加载页面，最好的解决方案是
const url = new URL(window.location);
url.searchParams.set('q', 'q');
window.history.pushState({}, '', url);
this.$router.push({ query: Object.assign(this.$route.query, { new: 'param' }) })
