VUE 页面缓存2

=============================转载==================================

每天进步一点点~~~

第一步 在app中设置需要缓存的div

//缓存的页面

1 <keep-alive>
2 <router-view v-if="$route.meta.keepAlive"></router-view>
3 </keep-alive>
4 
5 //不缓存的页面
6 <router-view v-if="!$route.meta.keepAlive"></router-view>

 

第二步 在路由router.js中设置.vue页面是否需要缓存

 1 {
 2 path: '/',
 3 name: 'HomePage',
 4 component: HomePage,
 5 meta: {
 6 keepAlive: false, //此组件不需要被缓存
 7 isBack: false, //用于判断上一个页面是哪个
 8 }
 9 },
10 {
11 path: '/insure',
12 name: 'Insure',
13 component: insure,
14 meta: {
15 keepAlive: true, //此组件需要被缓存
16 isBack:false, //用于判断上一个页面是哪个
17 }
18 },
19 {
20 path: '/confirm',
21 name: 'confirm',
22 component: confirm,
23 meta: {
24 keepAlive: false, //此组件不需要被缓存
25 isBack:false, //用于判断上一个页面是哪个
26 }
27 }

 

第三步

1 beforeRouteEnter(to, from, next) {
2 if (from.name == 'confirm') {
3 to.meta.isBack = true;
4 }
5 next();
6 }

 

第四步
当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。

当再次进入（前进或者后退）时，只触发activated。

第五步
默认执行这个方法

1 activated() {
2 if (!this.$route.meta.isBack) { //true执行
3 // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
4 //清空表单
5 
6 }
7 // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
8 this.$route.meta.isBack = false;
9 }