vue官方推薦了幾種使用方法,可也看看link
我具體說說自己在項(xiàng)目中的使用,我采用的是$route.meta.keepAlive的方式來實(shí)現(xiàn)路由切換時(shí),頁面的緩存

• App.vue里面使用keep-alive,如下

<template>
  <div id="app">
        <keep-alive>
            <--! 需要緩存的-->
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <transition enter-active-class="slide-forward" leave-active-class="slide-back">
            <--! 不需要緩存的-->
            <router-view v-if="!$route.meta.keepAlive"></router-view>
        </transition>
    
  </div>
</template>

注意:我在不需要緩存的router-view上面加了transtion動(dòng)畫效果,但是在需要緩存的路由上面并沒有加,因?yàn)閞outer-view和transtion都是虛擬的DOM都不會(huì)被渲染在頁面上,如果你給需要緩存的加上動(dòng)畫效果的標(biāo)簽,你會(huì)發(fā)現(xiàn)頁面一樣會(huì)刷新,并沒有達(dá)到緩存的效果
其實(shí)官方說明里面也有提到這一點(diǎn),是緩存不活動(dòng)的組件,當(dāng)然你如果非得要給組件加上動(dòng)畫效果,你可以在單獨(dú)的組件上面去加,這樣子也是不影響緩存的

官方說明

• router/index.js里面做配置

{
      path:'/partManagement',
      name:'PartManagement',
      component : resolve => require(['@/components/pages/PartManagement'] , resolve),
      meta:{
        requireAuth : true,
        keepAlive: true,        
        pageTitle:'零件管理 '        
      }
    },

將屬性這樣設(shè)置即可keepAlive: true