调用actived钩子函数，发现代码没有执行.......为什么

• 背景技术选型：vue+vue-router+vuex

第一步：路由配置文件设置keepAlive=true

//index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Classify',
      name: 'Classify', 
        // 设置keepAlive属性
      meta: {
        keepAlive : true 
      },
      component: resolve => require(['@/views/classify/Classify'], resolve)
    }
  ],
  mode:'history'
})

第二步：标注需要缓存的组件，用<keep-alvie>包裹

<!--app.vue-->
<template>
    <div id="app">
        <!--需要缓存组件-->
        <keep-alive>
            <!--router-view组件是一个 functional 组件，渲染路径匹配到的视图组件-->
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <!--不需要缓存组件-->
        <router-view v-if="!$route.meta.keepAlive"></router-view>
        <moduleFooter></moduleFooter>
    </div>
</template>

第三步：activated函数调用

//Classify.vue
activated () {
  console.log("activated调用了");
}

总结

• 在router中设置需要缓存的组件
• <keep-alive>包裹需要缓存组件
• 页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated
• 可以动态控制是否缓存组件，代码如下：

beforeRouteLeave(to, from, next) {
  // 设置下一个路由的 meta
  to.meta.keepAlive = false; // 不缓存，即刷新
  next();
}