需求背景:
项目主流程缓存优化,主流程页面(组件)切换时保持之前加载的状态,避免反复渲染影响页面性能,同时也可以很大程度上减少接口请求,减小服务器压力。
主要知识点:
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) 就是设定好一个返回错误,然后在你跳转的时候出错了,路由守卫就会把你提前给它的错误信息,反馈给你。
也可以在单独在路由中去设置一个独享的路由守卫
总结了一下:上面三种方法都有用,特别是第一种,很实用,达到了自己想要的目的!
–(第一次写文章,若不清晰,还请体谅体谅!不太好组织语言)
以后我会多多写一些比教实用的东西,还希望大家有不同的看法或想法,畅聊一下!
最后再说一下,万物皆上图