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