<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