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+次）進入不會再執行此鉤子函數
}