Question

我有一个应用，其中组件Foo用作路由的模板app/foo。此组件具有子组件，这些子组件也用作路径的模板：app/foo/bar，app/foo/baz等。

我将全局vuex商店对象绑定到路由的query属性，这样如果对象设置为{ a: 1, b: 2 }，则url参数将更改为{ {1}};如果用户将参数更改为?a=1&b=2，则对象将更新为?a=0&b=0。这一切都按预期工作。

我遇到的麻烦是，当我路由到{ a: 0, b: 0 }下的任何路径时，我失去了路由的app/foo属性，并且url params消失了。

我可以像这样动态传递query对象：

query

但是，这很快就难以维持。

我知道Vue Router提供added life-cycle events，我认为我应该能够更新this.$router.push({ name: 'bar', query: this.$route.query });组件Foo事件的查询。我做了几次不同的尝试，但没有骰子：

beforeRouteUpdate

编辑：

我还尝试在beforeRouteUpdate (to, from, next) { // This gives me an error saying that the query is read-only to.query = from.query; // This does not update the query this.$router.replace({ query: from.query }) next(); },上设置观察程序，以便在路由更改时替换查询。但是，这会导致无限循环：

$route

有没有人知道如何让Vue Router查询在组件级持久存在？

Answer 1

基于@ craig_h的评论，我在$route添加了一个观察者：

watch: {
  $route(to, from) {
    if (to.path != from.path) { // to prevent an infinite loop
      this.$router.replace({ query: from.query })
    }
  }
}

这适用于大多数情况，除非组件偶然路由到当前路由。在这种情况下，查询仍然丢失，因为to.path和from.path值相同。

我的解决方法是将检查添加到可能路由到当前路由的组件：

if ((name != this.$route.name) || (params != this.$route.params)) {
  this.$router.push({ name, params });
}

这样可行，但仍不理想。

使Vue路由器查询在父组件级别保持不变

编辑：

1 个答案: