如何使用Vue-Router在Vue中设置URL查询参数 [英] How to set URL query params in Vue with Vue-Router

问题描述

我正在尝试在更改输入字段时使用 Vue-router 设置查询参数，我不要我想导航到其他一些页面，但只是想在同一页面上修改url查询参数，我这样做：

  this。$ router.replace（{query：{q1：q1}}）
  

但这也会刷新页面并将y位置设置为0，即滚动到页面顶部。这是设置URL查询参数的正确方法，还是有更好的方法。

---

编辑：<这是我的路由器代码：

  export default new Router（{ 
模式：'history'，
 scrollBehavior :( to，from，savedPosition）=> {
 if（to.hash）{
 return {selector：to.hash} 
}其他{
返回{x：0，y：0} 
} 
}，
路线：[
 ....... 
 {路径：'/ user /：id'，组件：UserView}，
] 
}）
  

解决方案

以下是文档中的示例：

  //查询，导致/ register？plan = private 
 router.push（{path：'register'，query：{plan：'private'}}）
  

参考： https://router.vuejs.org/en/essentials/navigation.html

如那些文档中所述， router.replace 的工作方式类似于 router.push

所以，你似乎在你的示例代码中正确使用它。但我认为您可能还需要包含 name 或 path 参数，以便路由器有一些导航路径至。没有名称或路径，它看起来没什么意义。

这是我目前的理解：

• 查询是可选的router - 构建视图的组件的一些其他信息


• name 或 path 是强制性的 - 它决定在< router-view> 中显示哪个组件。

这可能是示例代码中缺少的内容。

编辑：评论后的其他详细信息

在这种情况下，您是否尝试过使用命名路径？你有动态路线，并且更容易单独提供参数和查询：

 路线：[
 {name： 'user-view'，path：'/ user /：id'，component：UserView}，
 //其他路线
] 
  

然后在你的方法中：

 这个。$ router.replace（ {name：user-view，params：{id：123}，query：{q1：q1}}）
  

从技术上讲，上述和之间没有区别。$ router.replace（{path：/ user / 123，query：{q1：q1} }），但是在命名路由上提供动态参数比组成路由字符串更容易。但在任何一种情况下，都应该考虑查询参数。在任何一种情况下，我都找不到查询参数处理方式的任何问题。

在你进入路线后，你可以将你的动态参数提取为 this。$ route.params.id 并且您的查询参数为 this。$ route.query.q1 。

I am trying to set query params with Vue-router when changing input fields, I don't want to navigate to some other page but just want to modify url query params on the same page, I am doing like this:

this.$router.replace({ query: { q1: "q1" } })

But this also refreshes the page and sets the y position to 0, ie scrolls to the top of the page. Is this the correct way to set the URL query params or is there a better way to do it.

---

Edited:

Here is my router code:

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 },
  ]
})

解决方案

Here is the example in docs:

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

Ref: https://router.vuejs.org/en/essentials/navigation.html

As mentioned in those docs, router.replace works like router.push

So, you seem to have it right in your sample code in question. But I think you may need to include either name or path parameter also, so that the router has some route to navigate to. Without a name or path, it does not look very meaningful.

This is my current understanding now:

• query is optional for router - some additional info for the component to construct the view
• name or path is mandatory - it decides what component to show in your <router-view>.

That might be the missing thing in your sample code.

EDIT: Additional details after comments

Have you tried using named routes in this case? You have dynamic routes, and it is easier to provide params and query separately:

routes: [
    { name: 'user-view', path: '/user/:id', component: UserView },
    // other routes
]

and then in your methods:

this.$router.replace({ name: "user-view", params: {id:"123"}, query: {q1: "q1"} })

Technically there is no difference between the above and this.$router.replace({path: "/user/123", query:{q1: "q1"}}), but it is easier to supply dynamic params on named routes than composing the route string. But in either cases, query params should be taken into account. In either case, I couldn't find anything wrong with the way query params are handled.

After you are inside the route, you can fetch your dynamic params as this.$route.params.id and your query params as this.$route.query.q1.

这篇关于如何使用Vue-Router在Vue中设置URL查询参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！