<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
|
1
|
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
|
prop:
- include: 字符串或正则表达式。只有匹配的组件会被缓存。
- exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
在2.1.0版本Vue中
常见用法：
|
1
2
3
4
5
6
7
8
9
|
// 组件
export
default
{
name:
'test-keep-alive'
,
data () {
return
{
includedComponents:
"test-keep-alive"
}
}
}
|
1 <keep-alive include="test-keep-alive"> 2 <!-- 将缓存name为test-keep-alive的组件 --> 3 <component></component> 4 </keep-alive> 5 6 <keep-alive include="a,b"> 7 <!-- 将缓存name为a或者b的组件，结合动态组件使用 --> 8 <component :is="view"></component> 9 </keep-alive> 10 11 <!-- 使用正则表达式，需使用v-bind --> 12 <keep-alive :include="/a|b/"> 13 <component :is="view"></component> 14 </keep-alive> 15 16 <!-- 动态判断 --> 17 <keep-alive :include="includedComponents"> 18 <router-view></router-view> 19 </keep-alive> 20 21 <keep-alive exclude="test-keep-alive"> 22 <!-- 将不缓存name为test-keep-alive的组件 --> 23 <component></component> 24 </keep-alive>
结合router，缓存部分页面
使用$route.meta的keepAlive属性：
1 <keep-alive> 2 <router-view v-if="$route.meta.keepAlive"></router-view> 3 </keep-alive> 4 <router-view v-if="!$route.meta.keepAlive"></router-view>
需要在router中设置router的元信息meta：
1 //...router.js 2 export default new Router({ 3 routes: [ 4 { 5 path: '/', 6 name: 'Hello', 7 component: Hello, 8 meta: { 9 keepAlive: false // 不需要缓存 10 } 11 }, 12 { 13 path: '/page1', 14 name: 'Page1', 15 component: Page1, 16 meta: { 17 keepAlive: true // 需要被缓存 18 } 19 } 20 ] 21 })
使用效果
以上面router的代码为例：
|
1
2
3
4
5
6
7
8
|
<!-- Page1页面 -->
<template>
<div
class
=
"hello"
>
<h1>Vue</h1>
<h2>{{msg}}</h2>
<input placeholder=
"输入框"
></input>
</div>
</template>
|
|
1
2
3
4
5
6
|
<!-- Hello页面 -->
<template>
<div
class
=
"hello"
>
<h1>{{msg}}</h1>
</div>
</template>
|
(1) 在Page1页面输入框输入“asd”，然后手动跳转到Hello页面；
(2) 回到Page1页面发现之前输入的"asd"依然保留，说明页面信息成功保存在内存中；
图1 进入Page1页面，并输入"asd"
图2 跳转到Hello
图3 返回Page1页面，输入框数据会被保留
当然，也可以通过动态设置route.meta的keepAlive属性来实现其他需求，
- 首页是A页面
- B页面跳转到A，A页面需要缓存
- C页面跳转到A，A页面不需要被缓存
思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置to.meta.keepAlive：
A的路由：
|
1
2
3
4
5
6
7
8
|
{
path:
'/'
,
name:
'A'
,
component: A,
meta: {
keepAlive:
true
// 需要被缓存
}
}
|
|
1
2
3
4
5
6
7
8
9
10
11
|
export
default
{
data() {
return
{};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive =
true
;
// B 跳转到 A 时，让 A 缓存，即不刷新
next();
}
};
|
|
1
2
3
4
5
6
7
8
9
10
11
|
export
default
{
data() {
return
{};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive =
false
;
// C 跳转到 A 时让 A 不缓存，即刷新
next();
}
};
|
亲测有效哦~
|
1
|
keep-alive生命周期钩子函数：activated、deactivated
|
使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。
记录一个vue的后台管理项目-多标签组件的实现： 效果图大概是这样的：
点击左侧的菜单栏，会打开相应的标签页，这些标签可以关闭，可以切换； 使用的框架是vue,使用的UI库是element，另外还使用到vue-router和vuex
组成Layout的是：模块组件名称头部Header左侧菜单LeftMenu标签页栏TagsView主视口AppMain本文单就TagsView进行笔记记录 TagsView主要功能： 1.生成打开过的路由，对应当前路由的标签是active状态； 2.切换路由； 3.关闭页签； 4.打开的标签过多，超出容器宽的话，在容器上面可以使用滚轮上下切换（本项目的模块是按照业务划分的，由于放置滚轮的容器是与整个多标签组件并无业务关联的，那么滚轮容器是单独拿出来的一个组件，有自己的滚轮事件，留出slot插槽放入TagsView）
对于多标签页来说，每一个标签是一个router-link，而生成这些标签router-link最重要的是浏览过的路由的记录，并且监听着路由的改变；本项目使用了vuex去记录浏览过的路由；
先说说多标签页的vuex配置：
在store/modules/下新建tagsview.js，具体的提交方法会在组件中用到的时候详细分析const tagsview ={ state:{ visitedviews:[],//存放所有浏览过的且不重复的路由数据 }, mutations:{//这 ADD_VISITED_VIEWS:(state,view)=>{//打开新页签--添加路由数据的方法 if(state.visitedviews.some(v=>v.path==view.path))return; state.visitedviews.push({ name:view.name, path:view.path, title:view.meta.title || 'no-title' }) }, DEL_VISITED_VIEWS:(state,view)=>{//关闭页签--删除路由数据的方法 for(let [i,v] of state.visitedviews.entries()){ if(v.path == view.path){ state.visitedviews.splice(i,1) break } } } }, actions:{//调用这里去触发mutations，如何调用？在组件内使用this.$store.dispatch('action中对应名字', 参数) addVisitedViews({commit},view){//通过解构赋值得到commit方法 commit('ADD_VISITED_VIEWS',view)//去触发ADD_VISITED_VIEWS，并传入参数 }, delVisitedViews({commit,state,view){//删除数组存放的路由之后，需要再去刷新路由，这是一个异步的过程，需要有回掉函数，所以使用并返回promise对象，也可以让组件在调用的时候接着使用.then的方法 //commit('DEL_VISITED_VIEWS',view) return new Promise((resolve)=>{//resolve方法：未来成功后回掉的方法 commit('DEL_VISITED_VIEWS',view); resolve([...state.visitedviews]); }) }
}}export default tagsview123456789101112131415161718192021222324252627282930313233343536这个moudle写完了之后，别忘记放在Vuex.Store实例中去
import Vue from 'vue';import Vuex from 'vuex';import tagsview from './modules/tagsview.js'import getters from './getter.js'
Vue.use(Vuex)const store= new Vuex.Store({ modules:{ tagsview }, getters})
export default store1234567891011121314另外getters.js是这样的：
const getters ={ visitedviews:state => state.tagsview.visitedviews}export default getters1234TagsView.vue:
标签页的初始渲染<template id=""> <div class="tags-view-container"> <scroll-panel class="tags-view-wrap"> <router-link v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path" class="tags-view-item" :class="isActive(tag)?'active':''"> {{tag.title}} <span class='el-icon-close' @click.prevent.stop="delSelectTag(tag)"></span> </router-link> </scroll-panel> </div></template>12345678910scroll-panel :容器组件
visitedViews来自计算属性：
computed:{ visitedViews(){//store中取值 return this.$store.state.tagsview.visitedviews } },12345isActive()方法是用来判断页签的路由是否为当前路由
methods:{ isActive(route){ return route.path == this.$route.path }, }12345打开一个标签页另外，点击左侧菜单树，或者点击其他的tab页签，会导致路由的改变，那么就需要一个watcher
watch:{ $route(){ this.addViewTags(); } },12345addViewTags()方法是在路由改变时候触发的，会去提交store中的addVistitedViews方法，该方法会根据state中存放的路由数据来判断新打开的路由之前有没有存放过，如果没有push到数组中去，数组会进行改变
methods:{ addViewTags(){//路由改变时执行的方法 if(this.$route.name){ const route = this.$route this.$store.dispatch('addVisitedViews',route); } }, }12345678关闭一个标签页： delSelectTag()方法用来关闭一个标签页，在此会执行提交store中delVisitedViews方法，需要在该方法执行完删除数组中的数据后，再进行更改路由；methods:{ delSelectTag(route){//先提交删除数据的方法,数组删除出掉数据后，如果关闭的是当前打开的路由需要将路由改为数组最后一次push进去的路由 this.$store.dispatch('delVisitedViews',route).then((views)=>{ if(this.isActive(route)){//只有在关闭当前打开的标签页才会有影响 let lastView = views.slice(-1)[0]//选取路由数组中的最后一位 if(lastView){ this.$router.push(lastView); }else{ this.$router.push('/'); } } }) } }————————————————版权声明：本文为CSDN博主「喵大嗷」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/connie_0217/article/details/79523955