如何使用Vue- router在Vue中设置URL查询参数

文档中的示例:

// 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

所以，你似乎有它在你的问题样例代码正确。但我认为你可能需要包括name或path参数也，使路由器有一些路由导航。如果没有name或path，它看起来不太有意义。

这是我目前的理解:

• query对于路由器来说是可选的——一些用于组件构建视图的附加信息
• name或path是强制性的-它决定在你的<router-view>中显示什么组件。

这可能是您的示例代码中缺少的东西。

编辑:注释后的附加细节

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

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"}})之间没有区别，但是在命名路由上提供动态参数比组成路由字符串更容易。但是在这两种情况下，都应该考虑查询参数。无论哪种情况，我都找不到处理查询参数的方式有任何问题。

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

无需重新加载页面或刷新dom, history.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和next 2.8.1上测试。

要小心这个方法!
Vue路由器不知道url已经改变了，所以它不会在pushState之后反映url。

实际上你可以这样推送查询:this.$router.push({query: {plan: 'private'}})

基于:https://github.com/vuejs/vue-router/issues/1631

好的，所以我一直试图添加一个参数到我现有的url已经有一个星期的参数现在lol，原始url: http://localhost:3000/somelink?param1=test1我一直在尝试:

this.$router.push({path: this.$route.path, query: {param2: test2} });

这段代码将删除param1并变成http://localhost:3000/somelink?param2=test2

this.$router.push({path: this.$route.fullPath, query: {param2: test2} });

现在我成功地在旧参数上添加了参数，结果是

http://localhost:3000/somelink?param1=test1&param2=test2

如果你试图保留一些参数，而改变其他参数，请确保复制vue路由器查询的状态，而不是重用它。

这是有效的，因为您正在创建一个未引用的副本:

  const query = Object.assign({}, this.$route.query);
  query.page = page;
  query.limit = rowsPerPage;
  await this.$router.push({ query });

而下面将导致Vue路由器认为您正在重用相同的查询，并导致NavigationDuplicated错误:

  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));
);

注意，虽然上面的例子是针对push()的，但它也适用于replace()。

用vue-router 3.1.6测试。

这是我在不刷新页面的情况下更新URL中的查询参数的简单解决方案。请确保它适用于您的用例。

const query = { ...this.$route.query, someParam: 'some-value' };
this.$router.replace({ query });

我的解决方案，不刷新页面，没有错误Avoided redundant navigation to current location

    this.$router.replace(
      {
        query: Object.assign({ ...this.$route.query }, { newParam: 'value' }),
      },
      () => {}
    )

您也可以直接使用浏览器的window.history.replaceState API。它不会重新挂载任何组件，也不会造成多余的导航。

window.history.replaceState(null, '', '?query=myquery');

更多信息在这里。

this.$router.push({ query: Object.assign(this.$route.query, { new: 'param' }) })

对于添加多个查询参数，这是为我工作的(从这里https://forum.vuejs.org/t/vue-router-programmatically-append-to-querystring/3655/5)。

上面的答案很接近…尽管是Object。分配它会改变这个$route。在执行Object.assign

时，确保第一个参数是{}

this.$router.push({ query: Object.assign({}, this.$route.query, { newKey: 'newValue' }) });

要一次设置/删除多个查询参数，我最终使用以下方法作为我的全局混合的一部分(this点到值组件):

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

我通常使用历史对象。它也不会重新加载页面。

的例子:

history.pushState({}, '', 
                `/pagepath/path?query=${this.myQueryParam}`);

这相当于使用Composition API

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({ path: 'register', query: { plan: 'private' }})
</script>

您还可以使用Vue devtools来确保它按预期工作(通过检查您所处的给定路由)，如下所示:https://stackoverflow.com/a/74136917/8816585

同时将挂载/卸载组件。一些普通的JS解决方案仍然是实现这一目的的最佳途径。

vue路由器在更新时不断重新加载页面，最好的解决方案是

  const url = new URL(window.location);
  url.searchParams.set('q', 'q');
  window.history.pushState({}, '', url);
        

With RouterLink

//With RouterLink
<router-link 
  :to="{name:"router-name", prams:{paramName: paramValue}}"
>
Route Text
</router-link>
//With Methods
methods(){
  this.$router.push({name:'route-name', params:{paramName: paramValue}})
}

methods(){
  this.$router.push({name:'route-name', params:{paramName, paramValue}})
}