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