使用keep-alive就行了 ### 如果所有页面都保持页面缓存就直接在app.vue中设置中加上keep-alive就行了 在app.vue中设置 ``` <div id="app"> <!-- 所有页面都保持页面缓存 --> <keep-alive> <router-view></router-view> </keep-alive> </div> ``` ### 如果需要根据配置来，可以先在路由配置上设置是否缓存在根据判断来 先在路由配置上设置是否缓存,isKeepAlive用来判断是否缓存 ``` { path: '/task_manage/index', name: 'task_manage', component: () => import('/@/views/task_manage/index.vue'), meta: { title: '任务管理', isLink: '', isHide: false, // isKeepAlive用来判断是否缓存 isKeepAlive: true, isAffix: false, isIframe: false, roles: ['admin', 'common'], icon: 'iconfont icon-shouye', }, }, ``` 然后在app.vue中设置是否使用keep-alive就行了 ``` <keep-alive> <router-view v-if="$route.meta.isKeepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.isKeepAlive"></router-view> ``` ### 还可以使用include与exclude等属性设置是否需要缓存 include 值为字符串或者正则表达式，匹配的组件会被缓存。 exclude 值为字符串或正则表达式，匹配的组件不会被缓存。 ### 使用keep-alive与不使用keep-alive生命周期函数介绍 **不使用keep-alive** beforeRouteEnter --> created --> mounted --> destroyed； **使用keep-alive** beforeRouteEnter --> created --> mounted --> activated --> deactivated； 再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated ，created和mounted不会再执行； ### 注意缓存中起作用需要加上名称name哟  而且这个需要和路由配置上的一致哦，乱写是不行的