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页面就缓存下来了，大功告成