一个常见的场景:
从 详情页 -->返回 列表页 的时候页面的状态是缓存,不用重新请求数据,提升用户体验。
从 列表页 -->详情页 的时候请求数据
也就是说,有的页面可以用缓存,不需要重新请求数据;有的页面需要重新请求数据,本篇记录这类需求;
首先:keep-alive
是 Vue
提供的一个抽象组件,主要用于保留组件状态或避免重新渲染。
但是 keep-alive
会把其包裹的所有组件都缓存起来。
实现:
1.在App.vue写2个router-view出口
//需要缓存的
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive>
//不需要缓存的 <router-view v-if="!$route.meta.keepAlive"></router-view>
2.在Router里定义好需要缓存的视图组件
new Router({ routes:[ { path:'/', name:'index', component:()=import('./views/keep-alive/index.vue') },{ path:'/list', name:'list', component:()=import('./views/keep-alive/list.vue'), meta:{ keepAlive:true } },{ path:'/detail', name:'detail', component:()=import('./views/keep-alive/detail.vue'} } ] })