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

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

 

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

 

 

 

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

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

• 在对应的组件中

activated() {
    if (!this.$route.meta.isBack) {
      // 操作，从其他页面进入时，可以操作恢复默认状态、请求接口。。。
      // 页码重置查询
 
    } else {
      // 详情页返回操作，比如页面位置
      //  页码不重置
   
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'HomeInfo' ) {
      to.meta.isBack = true
    } else {
      to.meta.isBack = false
    }
    next()
  }

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