vue页面缓存，keep-alive第一次无效的解决方法

方法二：使用 include + beforeRouteLeave + vuex 与方法一相似，不同的地方在于，将需要缓存的组件保存到全局变量，可以在路由的钩子函数里灵活的控制哪些组件需要缓存，那些不需要缓存；跟方法一相比，不需要每次再重新初始化数据，但是需要在vuex中保存数据；

1、在创建router实例的时候加上scrollBehavior方法

export default new Router({
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return {
        x: 0,
        y: 0
      }
    }
  }
})

2、将需要缓存的组件加在include属性里

<keep-alive :include="catch_components">
      <router-view></router-view>
</keep-alive>

3、在store里加入需要缓存的的组件的变量名，和相应的方法；

export default new Vuex.Store({
  state: {
    catch_components: []
  },
mutations:{
    GET_CATCHE_COMPONENTS (state, data) {
      state.catch_components = data
    }
}
})

4、在beforeRouteLeave钩子函数里控制需要缓存的组件

beforeRouteLeave (to, from, next) { //要在离开该组件的时候控制需要缓存的组件，否则将出现第一次不缓存的情况
    this.busy = true
    if (to.path === '/goods_detail') { // 去往详情页的时候需要缓存组件，其他情况下不需要缓存
      this.$store.commit('GET_CATCHE_COMPONENTS', ['home']) //注意，'home'将匹配首先检查组件自身的 name 选项（非router.js里的），如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
    } else {
      this.$store.commit('GET_CATCHE_COMPONENTS', [])
    }
    next()}