当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue服务端渲染浏览器端缓存（keep-alive）

vue服务端渲染浏览器端缓存（keep-alive）

2018年09月26日  | 移动技术网IT编程  | 我要评论

在使用服务器端渲染时，除了服务端的接口缓存、页面缓存、组建缓存等，浏览器端也避免不了要使用缓存，减少页面的重绘。

这时候我们就会想到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页面就缓存下来了，大功告成

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网