路由的缓存
在搭建 vue 项目时，有某些组件没必要多次渲染，所以需要将组件在内存中进行‘持久化’，此时 <keep-alive> 便可以派上用场了。 <keep-alive> 可以使被包含的组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下一次显示时，也不会重现渲染。
<router-link>和<router-view>和<keep-alive>
主要 结合 Vue Router 配置 meta true
1.keep-alive
<!-- template -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
//router配置
new Router({
routes: [
{
name: 'a',
path: '/a',
component: A,
meta: {
keepAlive: true
}
},
{
name: 'b',
path: '/b',
component: B
}
]
})
<!-- 一个include解决了，不需要多写一个标签，也不需要在路由元中添加keepAlive了 --> <keep-alive include='a'> <router-view></router-view> </keeo-alive>
<!-- 逗号分隔字符串，只有组件a与b被缓存。这样使用场景变得更有意义了 --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- Array (需要使用 v-bind，被包含的都会被缓存) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component>
<template>
<div>
<h1>欢迎页</h1>
<input type="text" name="" value=""><br>
<router-link to="/">回到首页</router-link>
</div>
</template>
<script>
export default {
name: 'hello',
//keep-alive钩子函数：组件被激活时调用
activated() {
console.log('欢迎页被激活');
},
//keep-alive钩子函数：组件消失，被缓存时调用
deactivated() {
console.log('欢迎页被缓存');
}
}
</script>
activated()：页面组件被激活时调用。即组件第一次渲染时会被调用，之后每次 keep-alive 激活时也会被调用。通常我们可以在这个方法中实现：每次进入页面的时候获取最新的数据。
只有组件被 keep-alive 包裹时，这两个函数才会被调用。如果作为正常组件使用，是不会被调用的。
在关于页（about.vue）路由离开 这个钩子函数中设置首页不缓存：
<template>
<div>
<h1>关于页</h1>
<input type="text" name="" value=""><br>
<router-link to="/">回到首页</router-link>
</div>
</template>
<script>
export default {
name: 'hello',
//keep-alive钩子函数：组件被激活时调用
activated() {
console.log('首页被激活');
},
//keep-alive钩子函数：组件消失，被缓存时调用
deactivated() {
console.log('首页被缓存');
},
beforeRouteLeave(to, from, next) {
//设置下一个路由的meta（即首页）
to.meta.keepAlive = false; //让首页不缓存，即刷新
//to.meta.keepAlive = true; //让首页缓存，即不刷新
next();
}
}
</script>
原文出自：www.hangge.com 转载请保留原文链接：https://www.hangge.com/blog/cache/detail_2132.html
