4.vue keep-alive实现前进刷新后退不刷新

• App.vue 中meta对象的属性控制是否展示

1 <keep-alive> 
2  <router-view v-if="$route.meta.keepAlive"></router-view> 
3  </keep-alive> 
4 <router-view v-if="!$route.meta.keepAlive"></router-view>

• router.js中，给需要不刷新的页面路由添加meta字段

1     path: 'homeInfo',
2     name: 'HomeInfo',
3     component: () => import('@/views/home/index'),
4     meta: {
5       title: '列表页',
6       keepAlive: true, // 判断是否需要缓存
7       isBack: false // 判断是否为返回操作
8     }

• 在对应的组件中

 1 activated() {
 2     if (!this.$route.meta.isBack) {
 3       // 操作，从其他页面进入时，可以操作恢复默认状态、请求接口。。。
 4       // 页码重置查询
 5  
 6     } else {
 7       // 详情页返回操作，比如页面位置
 8       //  页码不重置
 9    
10     }
11   },
12   beforeRouteEnter(to, from, next) {
13     if (from.name === 'HomeInfo' ) {
14       to.meta.isBack = true
15     } else {
16       to.meta.isBack = false
17     }
18     next()
19   }

• 注意：进入已经缓存的页面时，第一次进入，触发钩子created-> mounted-> activated，退出时触发deactivated。再次进入时，只触发activated