添加页面缓存
src/App.vue
使用keep-alive组件包裹，则再次进入页面时，会使用缓存中的组件，不会重新渲染（不再执行mounted及之前的生命周期中的代码），用于保存组件的原始状态（所有变量的值保持最终状态不变）
<keep-alive> <router-view></router-view> </keep-alive>
清除页面缓存
若部分页面希望每次打开时，都重新渲染（所有变量初始化为data中定义的值，并执行mounted及之前的生命周期中的代码），则需清除页面缓存
方式一：在 <keep-alive> 上添加 exclude属性
属性值为需清除缓存的页面的vue文件的name属性的值
比如针对 /test 路由对应的 test.vue组件清除缓存，则需
1. 给 test.vue 文件添加 name属性，值为“test” （可自定义为任意字符串）
export default { name:'test',
2. 在 <keep-alive> 上添加 exclude属性
<keep-alive exclude="test" > <router-view></router-view> </keep-alive>
若针对多个页面清除缓存，则使用 , 将name属性值隔开
<keep-alive exclude="test1，test2" > <router-view></router-view> </keep-alive>
或使用正则表达式（注意需用：绑定exclude，正则表达式用“”包裹）
<keep-alive :exclude="/^test.*/" > <router-view></router-view> </keep-alive>
方式二：通过路由传参实现 $route.meta.keepAlive
将 src/App.vue 中改为
<keep-alive > <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
在定义路由的文件中，设置 meta.keepAlive 参数，如在 src/routes.js 中
- 定义路由——使用缓存的页面
// 使用缓存的页面 { path: '/SUI', meta: { keepAlive: true }, name: 'SUI官网', component: resolve => require(['@/projects/SUIweb/index'], resolve) },
- 定义路由——不使用缓存的页面
// 不使用缓存的页面 { path: '/dic', name: '速查手册', component: resolve => require(['@/projects/dic/index'], resolve) },
局部缓存
若同一页面中，有的组件使用缓存，有的组件不使用缓存，则使用keep-alive组件包裹需要使用缓存的组件即可
<!--列表组件使用缓存--> <keep-alive > <List /> </keep-alive> <!--详情组件不使用缓存--> <Detail />
动态缓存
现需实现以下功能：
- 从文章新增页面到文章列表页面——刷新文章列表
- 从文章详情页面到文章列表页面——不刷新文章列表
即从不同页面进入相同页面，有时需使用缓存，有时不使用缓存，这时需使用到 beforeRouteLeave(to, from, next)
文章列表页的路由定义
{ path: '/list', name: '文章列表', component: List.vue, meta: { keepAlive: true // 需要被缓存 } }
文章新增页面组件中，设置beforeRouteLeave
export default { beforeRouteLeave(to, from, next) { // 让文章列表不缓存，即刷新 to.meta.keepAlive = false; next(); } };
文章详情页面组件中，设置beforeRouteLeave
export default { beforeRouteLeave(to, from, next) { // 让 文章列表页面 缓存，即不刷新 to.meta.keepAlive = true; next(); } };
