产品中不知道大家有没有遇到过这种需求，比如A页面有一个分页的表格，点击了第2页，某条数据进详情页B，详情页B中有返回按钮，点击返回按钮，路由回退到A页面，并加载A组件，渲染A页面，这是如果不做缓存的话，回退到A页面的时候，A页面会重新渲染，走mounted函数，执行data里面的初始化参数，当然这时候的参数就是第一页，所以相当于重新刷新了这个页面。这时候，产品提出了 需要保留上一级的操作，也就是说，从B页面回退到A页面，依然是第二页的数据
这时候，我们需要引入keep-alive
上代码
include包含哪个页面，哪个页面就会被缓存，不用重新加载，我们这边给出的写法就是，去当前路由以/为分割节点的所有页面，如：
localhost:8080/#/A/B
这样的话，进入B页面的时候A,B页面都会被缓存，回退到A页面，路由变成localhost:8080/#/A，这时候A页面就会被缓存了，同时也丢弃了B页面的缓存，减轻缓存压力。不过这个需要注意的就是我们需要构建嵌套路由A，B页面是父子级的关系，就可以做这种跳转。
当时以天衣无缝，完美，但是点击返回之后，竟然无法缓存，找了很久的原因，后来才发现
需要被缓存的页面，name一定要填写该页面对应的组件名称，不然router找不到该组件，无法进行缓存，大家一定要注意呀，不能进此坑，这个坑坑了我好久的
name
注意点：
缓存的页面是不会重新走接口请求数据的，如果需要重新请求接口数据
需要在activated()里面调用函数，但是这时候mounted（）里面已经调用过一次了，当页面刚进来的时候，该页面会调用activated()，mounted（），这样接口就会请求两次，所以如果针对需要缓存的页面，我们还是把初始化的请求放在activated里面就好，每次都会执行，不需要缓存的页面放在mounted里面
提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高
链接：https://www.jianshu.com/p/b1564296a78b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论