vue返回上一頁的時候，預設都會重新執行生命週期，重新載入資料，這樣其實不太友好。那我們仿照微信小程式，返回上一頁不會觸發onLoad，但是會觸發onShow，我們就可以在onShow裡面做一些事情。

1、使用keep-alive，控制頁面返回不重新整理

<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

2、如果只想快取部分頁面，可以在路由中設定一個引數控制

// app.vue
<template>
  <div id="app">
    <keep-alive >
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

// router/index.js
{
   path: '/usermanage',
   name: 'usermanage',
   meta: {
     keepAlive: true, //該欄位表示該頁面需要快取
     isBack: false, //判斷是否是返回
     title: '人員管理'
   },
   component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懶載入
},
 

3、路由頁面處理

<script>
  export default {
    name: 'userManage',
    data() {
      return {
        isFirstEnter: false
      }
    },
    beforeRouteEnter(to, from, next) {
      if (from.name == 'nextName') { // 這個name是下一級頁面的路由name
        to.meta.isBack = true; // 設定為true說明你是返回到這個頁面，而不是通過跳轉從其他頁面進入到這個頁面
      }
      next()
    },
    created:{
      this.isFirstEnter = true
    },
    mounted() {
      
    },
    activated() {
      if (!this.$route.meta.isBack || this.isFirstEnter) {
        this.initData() // 這裡許要初始化dada()中的資料
        this.getDataFn() // 這裡發起資料請求，（之前是放在created或者mounted中，現在只需要放在這裡就好了，不需要再在created或者mounted中請求！！）
      }
      this.$route.meta.isBack = false //請求完後進行初始化
      this.isFirstEnter = false;//請求完後進行初始化
    },
  }
</script>
 

4、這裡activated就相當於小程式的onShow事件