actived生命周期_vue生命周期钩子函数actived没有执行

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

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

第一步：路由配置文件设置keepAlive=truevue-router

//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'

})

第二步：标注须要缓存的组件，用包裹vuex

第三步：activated函数调用缓存

//Classify.vue

activated () {

console.log("activated调用了");

}

总结

在router中设置须要缓存的组件

包裹须要缓存组件

页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入(前进或者后退)时，只触发activated

能够动态控制是否缓存组件，代码以下：

beforeRouteLeave(to, from, next) {

// 设置下一个路由的 meta

to.meta.keepAlive = false; // 不缓存，即刷新

next();

}