wing-sky

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

posted on 2018-09-26 14:44 光屁股的小破孩 阅读(...) 评论(...) 编辑 收藏

相关文章:

  • 2018-09-17
  • 2022-01-17
  • 2022-02-21
  • 2021-12-21
  • 2021-08-07
  • 2021-12-21
  • 2022-12-23
猜你喜欢
  • 2021-07-30
  • 2021-11-08
  • 2022-12-23
  • 2021-04-07
  • 2018-09-12
相关资源
相似解决方案