Question

我有一个应用程序，它有一堆可以改变状态的下拉组件。。下拉列表的状态控制主数据表，该主数据表具有基于参数的信息。凉。

我还希望更改网址，以便用户可以与他们的同事共享网址，只需显示数据表，而无需选择下拉参数。

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

现在我通过手动观看所选的下拉参数（通过watch）并构建网址并使用this.$router.push更新浏览器历史记录来实现此功能。我觉得这不完全正确，但这是我能够始终如一地更新网址的唯一可靠方式。

主要问题是当我点击浏览器的后退/前进按钮时，组件不会根据网址更新其状态。如果我回击/前进，应用程序将保持当前状态。我该怎么做呢？

Answer 1

您似乎有效地尝试将下拉列表的状态绑定到您的网址查询。不幸的是，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挂钩中，您可以根据任何相关dropdownParams参数设置$route.query对象（如果它们已存在）：

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

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

在vue.js应用

1 个答案: