Vue设置keepAlive不生效怎么解决

本篇内容主要讲解“Vue设置keepAlive不生效怎么解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue设置keepAlive不生效怎么解决”吧!

设置keepAlive不生效

Vue设置keepAlive不生效怎么解决  vue 第1张

如演示,Vue页面导航回退后页面重新刷新了,搜索条件及结果都重置了,对于页面需要频繁切换的系统来说,体验不佳,我们希望页面第一次打开时加载,此后回退不再刷新

查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件。

1.在App.vue中的设置

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

2.在router中的index.js设置

利用meta属性

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被缓存的组件
 } 
]

 正常的话这样页面就能缓存并生效了,如果还是不生效

检查这个组件在router文件中的配置name和组件实例中的name不一致,如下面,全局守卫中拿到的to或from的name是从router中对应的路由对象中拿的,而App.js 中的keepAlive标签中的exclude是对比的组件实例中的name

Vue设置keepAlive不生效怎么解决  vue 第2张                   

          Vue设置keepAlive不生效怎么解决  vue 第3张

 使用过程发现,组件的name和router配置的name不一样,keep-alive也无法生效,这里也提供给我们一种思路,如果页面不需要缓存,把name设置不一样就好了(不推荐使用)

keep-alive缓存组件不生效的坑

坑出现背景

在维护公司代码时发现里面写watch route不生效,无法监听子路由的table切换。组件不会缓存,但是全局组件已经做过缓存处理。此处每次进入此table页都会触发created周期。花费大半个小时之后终于找到了问题点

坑的原因

keep-alive缓存时include中的名字必须与组件上的名字完全一致,组件没有写名字或者名字不一致就会导致缓存失效,每次进入组件都触发created生命周期

代码如下

全局组件中

   <keep-alive include="history">
       <router-view></router-view>
    </keep-alive>

组件中

export default {
  name: "history",/*此处的name必须有且与include中的一致*/
  components: {
    VTable
  },

到此,相信大家对“Vue设置keepAlive不生效怎么解决”有了更深的了解,不妨来实际操作一番吧!这里是蜗牛博客网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论

有免费节点资源,我们会通知你!加入纸飞机订阅群

×
天气预报查看日历分享网页手机扫码留言评论电报频道链接