Vue 路由按需keep-alive

一个常见的场景：

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

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

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

首先：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'}
        }
    ]
})