是否可以在不转到页面的情况下使用 vue-router 更改 url？答案

【问题标题】：Is it possible to change url using vue-router without going to the page?是否可以在不转到页面的情况下使用 vue-router 更改 url？
【发布时间】：2020-10-07 06:22:57
【问题描述】：

在 nuxtjs 和 /catalog 页面上有一家商店，我需要制作一个“加载更多”按钮。通过单击它，应该会加载产品并将 url 更改为 /catalog/page_2 （?page=2 不适合）。如果我通过 $router.push 更改 url，nuxt 会转到此页面，但我需要更改 url，但不能去任何地方。是否有可能以某种方式撤消重新加载但将更改保存在 url 中？

history.pushState 处理任务，但在这种情况下，nuxt 不知道 url 已更改，并且在浏览器中单击前进/后退时，nuxt 不会加载此页面所需的商品

【问题讨论】：

标签： vue.js nuxt.js vue-router

【解决方案1】：

分页在逻辑上属于主页，因此最好在 URL 查询中考虑它们，例如 ?page=2。您也可以使用router.replace 更改查询。

this.$router.replace({
        query: { ...this.$route.query, page: this.page},
      })

【讨论】：

感谢您的回答。但是除了分页之外，客户还希望过滤器被添加到 url，而不是通过 get 参数。也就是说，url应该是这样的 /categories/boys/shirts/color_red/size_s/material_cotton/page_2?order_type=asc&order_by=price

【解决方案2】：

用这个例子来做 https://codesandbox.io/s/withered-darkness-9ezn9?file=/pages/index/_id.vue 现在我可以更改过滤器、类别和 url 更改，但页面不会重新加载

【讨论】：