Vue的页面缓存

页面缓存在页面中长期会使用到，可以更快速的在页面切换期间的资源获取。
主要是用keep-alive实现

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

第一种方法：

//在App.vue中
//添加标签
  <keep-alive>
      <router-view />
  </keep-alive>
  //页面全部缓存

如果存在某些页面需要缓存，那么可以通过keep-alive的属性去处理
其中就是include和exclude
　　include：名称匹配的组件才会被缓存，其中可以写字符串或正则表达式；
　　exclude：名称匹配的组件不会被缓存，其中同样是字符串或正则表达式；

第二种方法：

在路由中进行设置通过添加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可以随便写，不需要做什么规律性的去写出一个合适的正则去匹配上，就会更加灵活些。
原文链接