Vue-- 监听路由变化，数据无法更新？

Posted 2020-09-24 游鱼与渔

　　之前写的Vue项目，有个问题困扰了好久。新闻板块有推荐、精华、最新等几个Tab，设想通过切换Tab，改变路由参数（get/news/:tab）去获取对应数据，然后渲染到页面（用的是同一套组件），问题来了：当切换Tab时，数据并没有更新，后来看了Vue-router官网，有这么一句话：提醒一下，当使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 意思很明显了：虽然路由参数发生了变化，但组件还是那个组件，Vue生命周期也还没结束，此时并不会刷新数据。（个人认为，开发spa页面，一切都是以路由为起点的，路由变化，页面跟着变化，复用组件竟然会影响到路由，很难受！！）

不过，官网也提出了相应的解决方案：复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象：

　　

const User = {
  template: ‘...‘,
  watch: {
    ‘$route‘ (to, from) {
      // 对路由变化作出响应...
    }
  }
}

　　今天，在逛社区的时候，又遇到这个‘’拦路虎‘’以及一个非常新颖的解决方案，相信不少人在看Vue官方文档的时候，对这句话有过疑问：用 :key管理可复用的元素（这句话出自条件渲染 v-if部分），如何管理，官网也给了演示（我第一次看的时候，好像是没有的例子的） 这个例子让我对v-if又有了不同的看法：以前认为v-if是动态的生成/去除元素，仔细看例子，会发现：模板相同，会造成一种“复用”的感觉（v-if和v-else的模板是一样一样的），也就是说，数据更新之前，会先比较模板先后的异同，再决定是否跟新数据，并不是先更新数据，再刷新模板。 对:key的详细解读来自知乎：https://www.zhihu.com/question/61064119  

　　上面的思考题其实跟我遇到的问题是一致的，自己进入了一个误区：Vue是数据驱动的，这句话是绝对没有问题的，但他不是‘金科玉律’，vue的底层实现应该是：通过比较模板先后的异同，再决定是否跟新数据（个人拙见，轻喷）。

　　回到正题，：key是用来阻止“复用”的。  Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可(Vue文档原话)

　　那么，给<router-view></router-view>添加一个key，能不能解决这个问题呢？答案是可以的（废话-_-||） 可以这样来：

　　

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
    }
 }

　　使用computed属性和Date()可以保证每一次的key都是不同的，这样就可以如愿刷新数据了。

　　　　对这个问题的研究就先到这里了，以后遇到新的方案，会继续补充

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　----2017.06.22  22：53