這個會一直緩存，只是判斷是否重新請求接口，而不會清空其他緩存的數(shù)據(jù)，如果用在列表頁，要清空篩選條件（頁數(shù)，搜索框）。

vue緩存頁面（keepAlive,beforeRouterEnter）

需求

從列表頁面進入詳情頁，返回列表頁，列表頁的數(shù)據(jù)不刷新，存在緩存中

設置路由

routes：[
  {
     path: '/list',
     name:'list',
     component: list,
     meta: {
       keepAlive: true,  // 是否緩存標志
       title:'列表頁'，
       isBack: false, // 是否需要刷新
     }
   },
   {
     path: '/detail',
     name:'detail',
     component: detail,
     meta:{
        title:'詳情頁'
     }
   },
]

頁面路由嵌套設置

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

頁面緩存數(shù)據(jù)處理

// 在進入頁面時先判斷是否是從詳情頁面返回
beforeRouterEnter (to, from, next) {
  if(from.path === '/detail') {
    to.meta.isBack = true
  }
  next()
},
activated () {
  // 如果不是從詳情頁面返回，則重新加載數(shù)據(jù)
  if (!this.$route.meta.isBack) {
    //加載頁面數(shù)據(jù)
  }
  // 從新設置頁面得路由元信息
  this.$route.meta.isBack = false
}

1.使用keep-alive進行頁面緩存時會生成兩個生命周期：actived,deactivated
2.created:在創(chuàng)建vue對象時，zaihtml標簽渲染之前就觸發(fā)，但是只觸發(fā)一次
3.mounted:是在掛載vue實例之后，鉤子在掛載時執(zhí)行一次，若頁面沒有緩存，返回頁面還會再執(zhí)行一次，若頁面有緩存的話，返回頁面時不再執(zhí)行
4.actived:是組件被激活后的鉤子函數(shù)，每次返回頁面都會執(zhí)行