Vue 路由按需keep-alive

一个常见的场景:

从 详情页 -->返回 列表页 的时候页面的状态是缓存,不用重新请求数据,提升用户体验。

从 列表页 -->详情页 的时候请求数据

也就是说,有的页面可以用缓存,不需要重新请求数据;有的页面需要重新请求数据,本篇记录这类需求;

首先:keep-alive是 Vue提供的一个抽象组件,主要用于保留组件状态或避免重新渲染。

Vue 路由按需keep-alive

但是 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'}
        }
    ]
})            

 

上一篇:tcp keepalive与http keep-alive


下一篇:Vue生命周期