在 vue.js 应用程序中使用浏览器后退/前进按钮

Question

我有一个应用程序，它有一堆改变状态的下拉组件。 .下拉菜单的状态控制一个主数据表，该数据表具有基于参数的信息。很酷。

我还想更改 URL，以便用户可以与同事共享 url，并且无需选择下拉参数即可显示数据表。

例如：http://localhost:8080/?region=372&pc=341&pc=375 或 http://localhost:8080/?region=372&pc=341&vendor=123456

现在我已经通过手动查看选择的下拉参数（通过watch）并构建一个url并使用this.$router.push在事情发生变化时更新浏览器历史记录来完成这项工作。我觉得这并不完全正确，但这是我能够持续更新 url 的唯一可靠方法。

主要问题是当我点击浏览器的后退/前进按钮时，组件不会根据 url 更新它们的状态。如果我后退/前进，应用程序将保持当前状态。我该如何正确处理？

Answer 1

看起来您正在有效地尝试将下拉列表的状态绑定到您的 URL 查询。不幸的是，VueRouter 没有针对此问题的内置解决方案。

我不确定您的数据是如何构成的，因此假设您有一个包含相关参数的对象 dropdownParams：

dropdownParams: {
  region: 372,
  pc: 341,
  vendor: 123456,
}

您需要在dropdownParams 上设置一个观察者，以便在更新时更新$route 中的查询。使用$router.replace 而不是$router.push，这样历史记录就不会改变：

watch: {
  dropdownParams(params) {
    // format the data however you want this is an example with lodash
    let query = _.pickBy(params, p => !_.isEmpty(p));
    this.$router.replace({ query: query });
  }
}

然后，在mounted 挂钩中，您可以根据任何相关的$route.query 参数设置dropdownParams 对象（如果它们已经存在）：

mounted() {
  let keys = _.keys(this.dropdownParams);
  _.assign(this.dropdownParams, _.pick(this.$route.query, keys));
}

现在，当用户更改下拉参数时，这些更改将反映在 URL 中。而且，如果用户加载组件时已经存在 URL 查询参数，组件会将这些值设置到下拉列表中。