经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » JavaScript » 查看文章
vue服务端渲染浏览器端缓存(keep-alive)
来源:cnblogs  作者:光屁股的小破孩  时间:2018/9/26 17:54:22  对本文有异议

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

这时候我们就会想到vue的keep-alive,接下来我们说一下keep-alive的使用

 

假如现在我们有两个页面,home.vue 和 about.vue

home.vue

  1. <template>
  2. <div>
  3. home
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: Home,
  9. created() {
  10. console.log('home)
  11. }
  12. }
  13. </script>

 about.vue  

  1. <template>
  2. <div>
  3. about
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: About,
  9. created() {
  10. console.log('home)
  11. }
  12. }
  13. </script>

  

在app.vue中我们使用keep-alive缓存

  1. <template>
  2. <div id="app">
  3. <keep-alive include="Home">
  4. <router-view class="view">
  5. </router-view>
  6. </keep-alive>
  7. </div>
  8. </template>
  9.  
  10. <script>
  11. export default {
  12. name: 'App'
  13. }
  14. </script>

  

这时候运行我们会发现Home页面就缓存下来了,大功告成

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号