vue中使用keep-alive實現指定頁面返回不刷新問題

vue中提供了一個內置組件keep-alive來緩存組件，避免多次加載相應組件，避免重復渲染。在項目中要實現在某一指定頁面返回后不刷新的情況，請看下面具體實現：

1.在router文件夾下index.js文件中添加路由信息，並設置需要緩存的頁面(這里需要注意的是在需要緩存的所有路由下都必須添加keepAlive，如果沒有使用keep-alive緩存組件，就可以不寫這個屬性)

{
    path: 'page1',
    name: 'page1',
    meta: {
      keepAlive: true, //此組件需要被緩存
      isBack:false, //用於判斷上一個頁面是哪個
    }
},
{
    path: 'page2',
    name: 'page2'
}

2.在入口文件app.vue中配置

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

<router-view v-if="!$route.meta.keepAlive">
  <!-- 這里是不被緩存的視圖組件 -->
</router-view>

3.在需要被緩存的頁面中(這里的頁面必須是被keep-alive包含的)設置鈎子函數

beforeRouteEnter(to, from, next) {
    if(from.name=='page2'){
      to.meta.isBack=true;
      //判斷是從哪個路由過來的，
      //如果是page2過來的，表明當前頁面不需要刷新獲取新數據，直接用之前緩存的數據即可
    } 
     //繼續執行
    next();
},
activated() {
    if(!this.$route.meta.isBack || this.isFirstEnter){
      // 如果isBack是false，表明需要獲取新數據，否則就不再請求，直接使用緩存的數據
      // 如果isFirstEnter是true，表明是第一次進入此頁面或用戶刷新了頁面，需獲取新數據
      // 執行自己寫的頁面的初始化
      this.init();
    }
    // 恢復成默認的false，避免isBack一直是true，導致下次無法獲取數據
    this.$route.meta.isBack=false
    // 恢復成默認的false，避免isBack一直是true，導致每次都獲取新數據
    this.isFirstEnter=false;
},
created(){
    this.isFirstEnter = true;
    // 只有第一次進入或者刷新頁面后才會執行此鈎子函數，使用keep-alive后（2+次）進入不會再執行此鈎子函數
}