标签：函数 created routes app 后退 exp 挂载 route cti
keep-alive用法
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
import Vue from ‘vue‘ import Router from ‘vue-router‘ import Home from ‘@/components/home/home‘ import Header from ‘@/components/home/header‘ import Citylist from ‘@/components/city/city-list‘ Vue.use(Router) export default new Router({ routes: [ { path: ‘/‘, name: ‘Home‘, component: Home, meta: { keepAlive: true // 需要被缓存 } }, { path: ‘/Header‘, name: ‘Header‘, component: Header, meta: { keepAlive: true // 需要被缓存 } }, { path:‘/citylist‘, name:‘citylist‘, component:Citylist, meta: { keepAlive: false // 不需要被缓存 } } ] })
这样就需要在app.vue中这样写
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
export default {
name: ‘App‘
}
</script>
<style>
</style>
这样就实现了有效的控制是否缓存。
activated,deactivated
注意一点：activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在
当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。
事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中， activated 中的不管是否需要缓存多会执行。
vue-cli keep-alive用法以及activated,deactivated
标签：函数 created routes app 后退 exp 挂载 route cti
原文地址：https://www.cnblogs.com/wanan-01/p/10132850.html
