VueCli用keep-alive实现onLoad,onShow

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 > 
      <!-- 不会执行生命周期函数,但会执行activated，deactivated两个函数 -->
      <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;//请求完后进行初始化
    },
    deactivated () {
      console.log('离开当前页')
    }
  }
</script>