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

问题描述

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

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" } })

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

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.

这是我的路由器代码:

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

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

因此，您在相关示例代码中似乎是正确的.但我认为您可能还需要包含 name 或 path 参数，以便路由器可以导航到一些路由.没有name 或path，看起来意义不大.

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.

这是我目前的理解:

• query 对于路由器来说是可选的 - 组件构建视图的一些附加信息
• name 或 path 是强制性的 - 它决定了要在您的 中显示的组件.

• 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.

评论后的其他详细信息

在这种情况下，您是否尝试过使用命名路由?你有动态路由，单独提供参数和查询更容易:

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
]

然后在你的方法中:

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

从技术上讲，上面和 this.$router.replace({path: "/user/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.

进入路由后，您可以获取动态参数为 this.$route.params.id 和查询参数为 this.$route.query.q1.

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屋！