Vue页面缓存 - 极悦
专注Java教育14年 全国咨询/投诉热线:444-1124-454
极悦LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 Vue页面缓存

Vue页面缓存

更新时间:2021-09-02 10:12:27 来源:极悦 浏览861次

页面缓存在页面中长期会使用到,可以更快速的在页面切换期间的资源获取

主要是用keep-alive实现

vue项目中,相关的写法比较多,还有一些注意点需要仔细

第一种方式

在App.vue中

添加标签

  <keep-alive>
      <router-view />
  </keep-alive>

这会就是所有的页面都会被缓存

这里做了两个页面的相互跳转,分别写了一个输入框,在输入内容后,跳转时,输入的内容因为缓存的原因会被保留

如果存在某些页面需要缓存,那么可以通过keep-alive的属性去处理

其中就是include和exclude

include:名称匹配的组件才会被缓存,其中可以写字符串或正则表达式

exclude:名称匹配的组件不会被缓存,其中同样是字符串或正则表达式

这里的名称是指组件的名称

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

第二种方式:

在路由中进行设置通过添加meta,route/index.js

export default new Router({
  routes: [{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        keepAlive: true // 该路由会被缓存
      }
    },
    {
      path: '/ss',
      name: 'ss',
      component: Ss,
meta: {        keepAlive:false // 该路由不会被缓存,不需要缓存的时候该属性可以不用写      }
}]
})

这时候页面还需要通过该属性进行判断是否缓存

在App.vue

  <keep-alive>
      <router-view v-if="$route.meta.keepAlive">
      </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive">
    </router-view>

这样写有个优点就是,需要缓存不需要缓存的name可以随便写,不需要做什么规律性的去写出一个合适的正则去匹配上,就会更加灵活些

常见的应用场景可以是,列表到详情页,从详情页返回到列表页,如果说列表页没有做缓存,在单页面下,会直接返回列表首页(存在分页的情况),就不能直接返回至之前离开的列表页,所以这个地方在列表页添加页面缓存后,可以做到返回至之前离开的列表页

没有缓存的时候,返回列表:

有缓存的时候,返回列表

所以从某些程度上来讲,即增加了页面的响应速度,又增加了用户体验,总体来说,还是比较实用的。

以上就是极悦小编介绍的Vue页面缓存",希望对大家有帮助,想了解更多可查看编程入门教程。极悦在线学习教程,针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识,让同学们更好更方便的学习和了解Java编程,感兴趣的同学可以关注一下。

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>