vue服務端渲染瀏覽器端緩存（keep-alive）

在使用服務器端渲染時，除了服務端的接口緩存、頁面緩存、組建緩存等，瀏覽器端也避免不了要使用緩存，減小頁面的重繪。

這時候咱們就會想到vue的keep-alive，接下來咱們說一下keep-alive的使用

 

假如如今咱們有兩個頁面，home.vue 和 about.vue

home.vue

<template>
      <div>
        home
    </div>
</template>  
<script>
    export default {
        name: Home,
        created() {
            console.log('home)
        }
    }    
</script>      

 about.vue　　

<template>
      <div>
        about
    </div>
</template>  
<script>
    export default {
        name: About,
        created() {
            console.log('home)
        }
    }    
</script>      

　　

在app.vue中咱們使用keep-alive緩存

<template>
  <div id="app">
    <keep-alive include="Home">
      <router-view class="view">
      </router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

　　

這時候運行咱們會發現Home頁面就緩存下來了，大功告成