目录

1.基本使用

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染

router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存

具体实现
App.vue这样修改

 Home.vue

<template>
  <div>
    <h2>我是主页</h2>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "home",
  activated() {
    this.$router.push(this.path).catch(e=>e);
  },
  beforeRouteLeave(to, from, next) {
    this.path = this.$route.path;
    next()
  }
}
</script>

<style scoped>
</style>

效果

点击首页

 点击关于

点击首页，可见，保存了上次浏览记录

 程序总体思路

路由在离开当前组件时，保存下状态，也就是当前path，下次回来时调用activated函数，跳转到之前保存的path

在程序中用到了组件内的导航守卫

 beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

又用到了activated()这个生命周期函数，该组件处于活跃状态就调用这个函数

这个函数只有组件被保持状态使用了keep-alive时，才是有效的

生命周期函数就是vue实例在某一个时间点会自动执行的函数

2.属性 

keep-alive有两个重要的属性

include=“字符串或正则表达式”，只有匹配的组件会被缓存

exclude=“字符串或正则表达式”，任何匹配的组件都不会被缓存

用法

<keep-alive exclude="profile,User">
   <router-view/>
</keep-alive>

这里的profile和User对应于，profile.vue和User.vue文件各自name选项后面的值