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

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

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

Answer 1

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

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

Vue Router，构建路由

1 个答案: