Vue.js中keep-alive的踩坑记录
需求背景：
项目主流程缓存优化，主流程页面（组件）切换时保持之前加载的状态，避免反复渲染影响页面性能，同时也可以很大程度上减少接口请求，减小服务器压力。
主要知识点：
vue动态组件中keepAlive中的使用，路由全局守卫，keepAlive组件量身定制的钩子。
设计思路：
首先，我们要知道为什么要用到keep-alive，是因为有一些重复，很少改动的数据想直接利用缓存，存储起来，减少接口的请求（一些重复的数据，请求多了也烦，还没啥实际意义,对吧！）
转回正题：
- 首先，在需要缓存的组件路由中，添加一个meta的属性，里面设置一个keepAlive（是否缓存）。
- 在App.vue中设置好keep-alive标签，可以在路由中设定值的方式，指定某个组件缓存。
- 然后通过vue.js官网写好的一些钩子函数，去实现某个页面缓存，或动态设置页面缓存
例如：beforeRouteLeave 页面离开时触发（这是写在页面上）
还有几种方式，例如在main.js中使用路由全局守卫去实现
to ：将要跳转页面的路由信息
from：当前页面的路由信息
next：是一个内置的方法，作用是是你进入到to中的路由对应的页面
（说白了就是进入下一个页面的钥匙，有就能进入，没有则不能）
next() 方法里面还能出入参数，例：
next(false) 路由守卫禁止你进入别的页面
next(’/’) 指定想要跳转那个页面
next(error) 就是设定好一个返回错误，然后在你跳转的时候出错了，路由守卫就会把你提前给它的错误信息，反馈给你。
也可以在单独在路由中去设置一个独享的路由守卫
总结了一下：上面三种方法都有用，特别是第一种，很实用，达到了自己想要的目的！
–（第一次写文章，若不清晰，还请体谅体谅！不太好组织语言）
以后我会多多写一些比教实用的东西，还希望大家有不同的看法或想法，畅聊一下！
最后再说一下，万物皆上图