我试图用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 },
]
})
当前回答
我通常使用history对象。它也不会重新加载页面。
例子:
history.pushState({}, '',
`/pagepath/path?query=${this.myQueryParam}`);
其他回答
对于添加多个查询参数，这对我来说是有效的(从这里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' }) });
为了一次设置/删除多个查询参数，我最终使用了以下方法作为全局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)
},
无需重新加载页面或刷新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。
我的解决方案，没有刷新页面，没有错误避免多余的导航到当前位置
this.$router.replace(
{
query: Object.assign({ ...this.$route.query }, { newParam: 'value' }),
},
() => {}
)
好吧，所以我一直试图添加一个参数到我现有的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
