使 Vue 路由器查询持久化在父组件级别

Question

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

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

我遇到的麻烦是，当我路由到app/foo下的任何路径时，我丢失了路由的query属性，url 参数消失了。

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

this.$router.push({ name: 'bar', query: this.$route.query });

但是，这很快就会变得难以维护。

我知道 Vue 路由器提供了额外的生命周期事件，我想我应该能够更新对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上设置观察程序，以便在路由更改时替换查询。但是，这会导致无限循环：

watch: {
$route(to, from) {
this.$router.replace({ query: from.query });
}
}

有谁知道一种使 Vue 路由器查询在组件级别持久化的方法？

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

这有效，但仍然不理想。