调用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();
}
