首先，考虑一个具有搜索，排序和分页的表。项（行）具有详细信息，用于加载显示详细信息组件的路径。在这个详细信息组件中，还有另一个带有搜索，排序和分页的表，其中还有一个详细视图可以进一步向下钻取。
我使用vuex来保留大多数组件的状态，至少在有意义的地方。在这种情况下，search query，sort和pagination都存储在商店中。另外请记住，我试图尽可能地分离我的组件，以使测试更容易，并提供更好的可维护性。
想象一下这个路由结构：
/属性 显示属性位置列表
/ Properties / location / 1 显示该位置内的建筑物列表
/ Properties / location / 1 / building / 1 显示该大楼内的办公室列表
让我们说我在第一条路线上，然后搜索一个位置，该位置产生3条与搜索查询匹配的记录。大！我点击第一个，查看一些细节......然后单击Go Back。我的搜索仍然完整，因为它存储在vuex中，因此保留了我的状态。完美。
我导航到另一条路线，完全与地点部分分开，然后导航回来。哎呀，我的搜索还在那里。这不是我所期望的（直观地），但是会以编程方式期待。
这是我如何解决它。请告诉我是否有更好的方式。
在我的路线中，我总是使用道具，在我的主导航组件中，我将其设置为传递clearState属性。
所以组件有这个：
props: {
clearState: {
type: Boolean,
default() {
return false;
}
}
},
created() {
if (this.clearState) {
this.$store.dispatch("properties/setSearch", "");
}
this.$store.dispatch("fetchLocations");
}
我在主导航菜单中的路线包含：
<router-link :to="{ name: "Locations", params: { clearState: true }}">Locations</router-link>
这很有效。但是，当我们向下钻取时，我有几层细节组件，所以现在我觉得我已经紧密耦合：
created() {
if (this.clearState) {
this.$store.dispatch("properties/setSearch", "");
this.$store.dispatch("buildings/setSearch", "");
this.$store.dispatch("offices/setSearch", "");
}
this.$store.dispatch("fetchLocations");
}
我玩过路由器防护，但是组件内this的访问权限不会立即可用，这会减慢对我的API的请求。它还迫使我使用元属性来确定路由应该强制清除状态。
我的问题
我已经解决了我的问题，但我有一种直觉，那里有一个更好的设计模式，我还没有想到。
我希望这是有道理的。