Vue Router，构造路由

Question

我正在我的应用程序中创建一个带有搜索字段的数据表，我想实现以下行为：

当用户键入研究时，URL 会更新。如果用户点击 在一个链接上并从他的导航器中点击“返回”，他回到了他的最后一个 搜索。

目前，我正在做以下事情：

export default {
  data () {
    return {
      search: ''
    }
  },
  watch: {
    search (value) {
      this.$router.replace('/products?search=' + value)
    }
  }
}

如您所见，我正在使用路由器的replace 功能。这让我可以让它发挥作用。而且它比push 方法更好，因为如果用户在搜索过程中点击“返回”，他会转到最后一页而不是最后一次研究，这正是我想要的。

但是，我不喜欢我写 URL 的方式。

我很想做这样的东西：

watch: {
  search (value) {
    let route = new Route(this.$route)

    route.query.search = value

    this.$router.replace(route.getPath())
  }
}

因为，让我们假设用户有其他参数，如分页或类似的东西，它们将被删除。我想要一个方法来获取我的实际 url 并添加/替换查询字符串参数。

这是我可以使用 Vue Router 实现的，还是我需要做其他事情：其他包/Vanilla JS？

Answer 1

为什么不直接使用对象位置参数$router.replace？例如：

watch: {
  search (value) {
    this.$router.replace({ path: 'products', query: { search: value }})
  }
}