Vue2.0实现页⾯缓存和不缓存的⽅式
1、在app中设置需要缓存的div
<keep-alive>//缓存的页⾯
<router-view v-if="$a.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$a.keepAlive"></router-view>//不缓存的页⾯
2、在路由router.js中设置.vue页⾯是否需要缓存
{
path: '/home',
component: home,
meta: { keepAlive: true },//当前的.vue⽂件需要缓存
},
{
path: '/notice',
react router缓存
component: notice,//当前页⾯不需要缓存
}
3、从缓存页⾯跳转到不缓存页⾯，或者从不缓存页⾯跳转到缓存页⾯的时候，会发现watch是不能监听路由的，是因为缓存和不缓存页⾯分别在不同的div⾥⾯，⼀个div⾥⾯是不可能监听到另⼀个div的路由的，所有需要把监听的路由都加上缓存（在路由添加 meta: { keepAlive: true }），路由在缓存页⾯之间进⾏跳转的时候，就可以通过监听路由来进⾏判断数据是否需要更新。
vue keep-alive 缓存后，进⼊缓存页需要再次更新
beforeRouteEnter (to, from, next) {
next (vm => {
})
},
mounted: function () {
}
keep-alive 数据更新问题
在项⽬中使⽤<keep-alive>包含<router-view>实现页⾯缓存，加速页⾯加载，
同时，这种⽅式带来⼀些弊端，请看如下⼤神解释：
****************************************************************************
当引⼊keep-alive的时候，页⾯第⼀次进⼊，钩⼦的触发顺序created-> mounted-> activated，退出时触发deactivated。
当再次进⼊（前进或者后退）时，只触发activated。
****************************************************************************
这就带来⼀个问题，之前在项⽬中使⽤mounted在页⾯加载时获取数据，使⽤<keep-alive>后⽅法不再⽣效，
根据上⾯的解释，将mounted替换为activated即可。
以上这篇Vue2.0 实现页⾯缓存和不缓存的⽅式就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。