如何在单页应用中，不改变路由实现层级下钻功能

背景

这几天项目遇到一个需求，需要在路由固定的前提下实现层级下钻功能。举个简单的例子，层级A的页面为root/test?title=testA，通过该页面可以跳转到A层级的子层级B页面root/test?title=testB，页面需要根据这个title分别查询各自的数据。
问题在于，此时复用的是同一个router，因此并不会触发生命周期钩子，那么对于刷新的行为，该放在哪里实现呢？

方案

简单粗暴的方法，监听$route.query。同时当下钻行为时，改变query。
除此之外，为了及时更新data，可以采用如下方法赋值：

Object.assign(this.$data, this.$options.data());

当然，如果需要子组件也刷新，可以采用v-if等方式重新创建。

问题

但是，问题是，在keep-alive模式中，未销毁的页面依然会监听query的变化，然后触发查询行为。
可以使用mixin，做一个activatedFlag的判断，决定是否执行逻辑

@Component({})
export class activatedMixin extends Vue {
  activatedFlag = false;

  mounted() {
    this.activatedFlag = true;
  }

  activated() {
    this.activatedFlag = true;
  }

  deactivated() {
    this.activatedFlag = false;
  }
}