vue缓存之keep-alive，设置想要缓存的页面

2019-12-14 21:01:30 
结合router，缓存部分页面
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
{
  path: '/',
  name: 'Hello',
  component: Hello,
  meta: {
    keepAlive: false // 不需要缓存
  }
},


虽然include，和exclude也能处理这个情况，但我不推荐这样。不好操作。

我们也可以监控，route变化，动态复制keep-live，看下一篇文章


include 使该标签作用于所有name属性的值跟此标签 include的属性值一致的vue页面


exclude 使该标签不作用于所有name属性的值跟此标签 exclude的属性值一致的vue页面


然后我就掉进坑里了，配置了一堆路由的name！！！！！无效！！！


使用include/exclude 属性需要给所有vue类的name赋值（注意不是给route的name赋值），否则 include/exclude不生效



  • 精彩推荐

  • 2019-12-29 15:05:57

    php 数组分页 array_slice()函数用法

    今天用到一个函数，非常好用，分享给大家 array_slice() -从数组中取出一段 也就是说用这个函数可以和sql语句一样实现分页，原理是将查询出的数组，取出从指定下标开始到指定长度的数组

  • 2019-12-30 10:17:21

    router-link传递参数，query

    在vue-router中，有两大对象被挂载到了实例this； $route（只读、具备信息的对象）； $router（具备功能的函数） 查询字符串： 去哪里 ？ <router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>

  • 2019-12-30 16:48:41

    vue provide/inject详解和用法

    父子组件交互方式多种，props、vuex、 、 emit、localStorage还有就是这个provide/inject了。它适合层级比较深的组件，比如子，子孙，子孙后代的组件有好几个用到父组件的某个属性，就可以用到这个provide/inject,它可以避免写大量繁琐的传值代码 我这里为什么要使用它？ 我一个知识库详情父组件中包含了大量的子组件，每个子组件都需要父组件的知识库ID,这时候我不想写大量props，就用到provide/inject进行传值了

  • 2020-01-03 00:36:00

    break和continue详解for循环

    1. break：直接跳出当前循环体（while、for、do while）或程序块（switch）。其中switch case执行时，一定会先进行匹配，匹配成功返回当前case的值，再根据是否有break，判断是否继续输出，或是跳出判断（可参考switch的介绍）。 2. continue：不再执行循环体中continue语句之后的代码，直接进行下一次循环。