Vue.js中keep-alive的踩坑记录

需求背景：

项目主流程缓存优化，主流程页面（组件）切换时保持之前加载的状态，避免反复渲染影响页面性能，同时也可以很大程度上减少接口请求，减小服务器压力。

主要知识点：

vue动态组件中keepAlive中的使用，路由全局守卫，keepAlive组件量身定制的钩子。

设计思路：

首先，我们要知道为什么要用到keep-alive，是因为有一些重复，很少改动的数据想直接利用缓存，存储起来，减少接口的请求（一些重复的数据，请求多了也烦，还没啥实际意义,对吧！）
转回正题：

1. 首先，在需要缓存的组件路由中，添加一个meta的属性，里面设置一个keepAlive（是否缓存）。
   
2. 在App.vue中设置好keep-alive标签，可以在路由中设定值的方式，指定某个组件缓存。
   
3. 然后通过vue.js官网写好的一些钩子函数，去实现某个页面缓存，或动态设置页面缓存
   例如：beforeRouteLeave 页面离开时触发（这是写在页面上）
   
   还有几种方式，例如在main.js中使用路由全局守卫去实现
   to ：将要跳转页面的路由信息
   from：当前页面的路由信息
   next：是一个内置的方法，作用是是你进入到to中的路由对应的页面
   （说白了就是进入下一个页面的钥匙，有就能进入，没有则不能）
   next() 方法里面还能出入参数，例：
   next(false) 路由守卫禁止你进入别的页面
   next(’/’) 指定想要跳转那个页面
   next(error) 就是设定好一个返回错误，然后在你跳转的时候出错了，路由守卫就会把你提前给它的错误信息，反馈给你。
   
   也可以在单独在路由中去设置一个独享的路由守卫
   总结了一下：上面三种方法都有用，特别是第一种，很实用，达到了自己想要的目的！

–（第一次写文章，若不清晰，还请体谅体谅！不太好组织语言）
以后我会多多写一些比教实用的东西，还希望大家有不同的看法或想法，畅聊一下！

最后再说一下，万物皆上图