Vue路由开启keep-alive时的注意点

HTML部分：

include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

值为组件的name


     

js部分

.....

    created: function () {
      console.log(1)
    },
    mounted: function () {
      console.log(2)
    },
    activated: function () {
      console.log(3)
    },
    deactivated: function () {
      console.log(4)
    }
    
.....

1. 什么时候获取数据
   当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

所以，应该activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中

2. $route中的数据获取
   使用了keep-alive后数据需要进入页面在activated中再次获取，才能达到更新的目的

activated() {
   this.bookid = this.$route.query.bookid
}