Vue路由监听

我知晓我的弱点把我困在何方，
一块彩绘玻璃仿佛花朵脱落初夏的血。
太阳的黑水之心取代了太阳，
取代了我的心。
今晚，
欲望如此沉重的巨型漂泊水轮大抵只对我一人可见……
我在别处绝不会沉沦吗？ 

                    —— 勒内·夏尔

最近做的Vue项目中，检索页面有多种类型的检索数据，当检索框中的检索词发生改变时，URL也需要跟着改变，并且切换分类时，检索词还需要保留在检索词中，效果如下：

遇到的问题主要是，如何监听路由变化：

在Vue的mounted周期内，只有在页面初始化的时候才会触发，可以在这个阶段通过URL获取到关键词，例如：

mounted() {
  this.q = this.$route.query.q;
}

获得了这个检索词之后就可以填充跳转后页面的输入框了，并且通过这个关键词传递给跳转的路由，例如：

<router-link :to="{path:'/search/item',query:{q:keyword}}">
    <el-menu-item index="2">条目</el-menu-item>
</router-link>

传递了检索词之后进入到各页面时，URL中会保留该检索词。

进入到各子路由页面后，当检索词发生了变化，监听的话需要通过watch监听$route的变化，来处理相应的变化，示例如下：

watch: {
  $route(to, from) {
    this.q = this.$route.query.q;
      // 当检索词发生变化后，路由需要发生改变，并向后台请求数据
      if (to.query.q != from.query.q) {
        this.$router.push({
          path: this.$route.path,
          query: {
            q: this.q,
            from: 0,
            size: this.pageSize
          }
        });
      this.getSearchItem();
    }
  }
}

通过这种方式，URL中的任何变化，包括检索词、翻页等都能够监听到变化,其中to跟from的格式如下：

当关键词发生变化后，进行路由跳转跟数据请求。