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

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

我还想更改URL，这样用户就可以与同事共享URL，只需显示datatable，而无需选择下拉参数

示例：或

现在，我通过手动查看所选的下拉参数（通过

watch

）并构建url，然后使用

this.$router.push

在情况发生变化时更新浏览器历史记录，实现了这一点。我有一种感觉，这不是完全正确的，但这是唯一可靠的方法，我已经能够使url更新一致

---

主要问题是，当我点击浏览器的后退/前进按钮时，组件不会根据url更新其状态。如果我点击back/forward，应用程序将保持当前状态。如何正确地执行此操作？

看起来您正在有效地尝试将下拉列表的状态绑定到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

hook中，您可以基于任何相关的

$route设置
dropdownParams
对象。查询
参数，如果它们已经存在：

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

现在，当用户更改下拉参数时，这些更改将反映在URL中。而且，如果用户加载的组件中已经存在URL查询参数，则该组件会将这些值设置为下拉列表。
是否使用历史记录模式？是。没有hasbang。我猜这是因为您使用的是URL查询参数，它不像vue路由器的路由参数那样绑定。也许你可以在
$route.query
上设置一个观察者，并根据更改后的值设置数据？这就是我现在正在做的，但问题是，对于一些我认为框架可以更轻松地处理的事情，似乎需要大量手动工作。主要问题是，当用户更改状态时，我会更改url查询，这反过来会重新填充数据表。当url查询根据上述更新时，请观看
$route.query
根据url更新应用程序的状态。这导致了一个周期性的人口问题。在手动更新状态时，我必须手动设置一个变量，以避免重新检查
$route.query
。如果相同的组件用于所讨论的路由，则挂载的挂钩是否也适用于浏览器后退/前进按钮？
挂载的
将在组件挂载到DOM时触发一次。如果该组件在路由更改时挂起，它将不会启动。因此，我们再次回到如何处理浏览器后退/前进使用。似乎需要手动完成。不知道你的意思。如果路由更改为包含带有下拉列表的组件，则将启动
已安装的
功能，更新
下拉列表参数。或者你是说你想在添加一个参数后点击后退按钮，它会删除该参数，而不是转到上一个路由？如果我向url添加一个查询参数，从技术上讲，它是同一个路由，是吗？因此，我必须观看
$route.query
。因为如果我单击“后退”按钮，将访问相同的路由，因此，除非我手动更新状态，否则不会发生任何事情。如果这让人困惑，我道歉。我不完全确定如何显示给定组件的问题。我将试着把它分解一下，并给出一个熊骨头的例子。