vue使用keep-alive緩存頁面，傳回頁面時重新整理部分資料

緩存頁面

// 路由配置
export default [
 {
  path: '/',
  name: 'home',
  component: Home,
  meta: {
   keepAlive: true // 需要被緩存
  }
 }, {
  path: '/:id',
  name: 'edit',
  component: Edit,
  meta: {
   keepAlive: false // 不需要被緩存
  }
 }
           

頁面

<keep-alive>
  <router-view v-if="$route.meta.keepAlive">
    <!-- 這裡是會被緩存的視圖元件，比如 Home！ -->
  </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
  <!-- 這裡是不被緩存的視圖元件，比如 Edit！ -->
</router-view>

           

這時凡是被keep-alive包裹住的頁面都會被緩存，如果想重新整理部分内容要啟用activated函數，用法同created，activated隻有在被keep-alive包裹時會觸發，activated函數一進入頁面就觸發

created() {
    console.log("激活created鈎子函數");
},
activated() {
	// 需要重新請求的寫在這裡
  	console.log("激活activated鈎子函數");
},