link之家
链接快照平台
- 输入网页链接，自动生成快照
- 标签化管理网页链接
相关文章推荐
|
酒量小的啄木鸟 · linux中如何将多个连续的空格转换为一个空 ...· 3 月前 · |
|
|
酒量大的洋葱 · Python列表根据条件筛选数据-百度经验· 7 月前 · |
|
|
朝气蓬勃的圣诞树 · 如何：直接实例化 WRL 组件 | ...· 8 月前 · |
|
|
乖乖的冰淇淋 · QT调用Restful服务_qt ...· 1 年前 · |
|
|
痴情的啄木鸟 · 使用 Preload&Prefetch ...· 1 年前 · |
我正在尝试使用以下命令设置查询参数
Vue路由器
当更改输入字段时，我不想导航到其他页面，而只是想修改同一页面上的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 },
})
10 个回答
高票数
最新
Stack Overflow用户
修改于2016-11-03 17:03
得票数
204
以下是文档中的示例：
// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})参考：
https://router.vuejs.org/en/essentials/navigation.html
如那些文档中所提到的，
工作原理如下
因此，您似乎在您的示例代码中找到了正确的方法。但我认为你可能需要包括
或者
参数，以便路由器有一些路由可供导航。如果没有
或者
，它看起来并不是很有意义。
这是我现在的理解：
对于路由器是可选的-用于构建视图的组件的一些附加信息
或者
是必需的-它决定在中显示哪个组件。
这可能是您的示例代码中缺少的部分。
编辑:评论后的其他详细信息
你有没有试过使用
命名路由
在这种情况下？您有动态路由，并且更容易分别提供参数和查询：
routes: [
{ name: 'user-view', path: '/user/:id', component: UserView },
// other routes
]然后在你的方法中：
this.$router.replace({ name: "user-view", params: {id:"123"}, query: {q1: "q1"} })从技术上讲，上面和
，但在命名路由上提供动态参数比组成路由字符串更容易。但在这两种情况下，都应该考虑查询参数。在这两种情况下，我都找不到处理查询参数的方式有任何问题。
进入路径后，您可以获取动态参数，如下所示
查询参数为
..。
Stack Overflow用户
回答于2018-09-25 01:07
得票数
19
实际上你可以像这样推送查询：
基于：
https://github.com/vuejs/vue-router/issues/1631
Stack Overflow用户
修改于2019-04-23 14:09
得票数
6
this.$router.push({ query: Object.assign(this.$route.query, { new: 'param' }) })
Stack Overflow用户
修改于2019-06-01 00:20
得票数
3
为了一次设置/删除多个查询参数，我最终使用了下面的方法作为我的全局混合的一部分(
指向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)
},
Stack Overflow用户
修改于2020-03-11 20:21
得票数
30
无需重新加载
页面或刷新dom，
能胜任这项工作。
在您的组件中或其他地方添加此方法即可完成此操作：
addParamsToLocation(params) {
history.pushState(
null,
this.$route.path +
'?' +
Object.keys(params)
.map(key => {
return (
encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
.join('&')
}因此，在组件中的任何位置，都可以调用
在window.history堆栈中推送带有查询参数的当前位置。
将查询参数添加到当前位置
在不推动新的历史的情况下
条目，使用
取而代之的是。
使用Vue 2.6.10和Nuxt 2.8.1进行测试。
使用此方法时要小心！
Vue路由器不知道url已更改，因此它不会在pushState之后反映url。
Stack Overflow用户
修改于2020-04-23 03:30
得票数
14
如果您试图保留某些参数，同时更改其他参数，请确保复制vue路由器查询的状态，并且不要重用它。
这是可行的，因为您正在制作一个未引用的副本：
const query = Object.assign({}, this.$route.query);
query.page = page;
query.limit = rowsPerPage;
await this.$router.push({ query });而下面的将导致Vue Router认为您正在重用相同的查询，并导致
错误：
const query = this.$route.query;
query.page = page;
query.limit = rowsPerPage;
await this.$router.push({ query });当然，您可以分解查询对象，如下所示，但您需要知道页面的所有查询参数，否则可能会在结果导航中丢失它们。
const { page, limit, ...otherParams } = this.$route.query;
await this.$router.push(Object.assign({
page: page,
limit: rowsPerPage
}, otherParams));
);请注意，虽然上面的示例是针对
，这适用于
也是。
已使用vue-router 3.1.6进行测试。
Stack Overflow用户
回答于2020-05-13 21:15
得票数
5
对于添加多个查询参数，这是对我有效的方法(从这里
https://forum.vuejs.org/t/vue-router-programmatically-append-to-querystring/3655/5
)。
上面的答案是close…尽管使用Object.assign，它会使this.$route.query发生变异，但这不是你想要做的，…在执行Object.assign时，请确保第一个参数为{}
this.$router.push({ query: Object.assign({}, this.$route.query, { newKey: 'newValue' }) });
Stack Overflow用户
回答于2020-06-14 19:45
得票数
3
推荐文章
|
|
酒量大的洋葱 · Python列表根据条件筛选数据-百度经验 7 月前 |