创建router配制组猛搜基件,枝谨
在写一个移动端游返项目时遇到了一个问题,每一个tab栏所对应的页面被封装成一个组件进行
复用,结果会导致他们共用一个滚动条.解决办法是给这个子组件加固定的高度（例如
height:100vh）,神中饥同时加一个属性overflow-y:auto,这样就可以解决这个问题.之后发现每当进
入主页中任意一篇文章再退出时,页面重新加载渲染了,之前的文章消失了,所有今天这一节想到
了路由缓存.
先说一下keep-alive的属性和用法.
Props ：
用法 ：
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.
是一个抽象组件：它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中.
当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行.
（只有被包裹的组件才具有这两个钩子函数）
其实不太建议使用include的,因为如果多个组件中都包括include中匹配到的组件,想单独
的让其中某个组件缓存是不太方便的.所以可以在分发路由时,在需要缓存的路由中把额外标
记的属性写在meta中,1.
使用的时候可以在根组件中通过$route.meta.keepAlive取到该值,然后进行v-if判断即可,
使用keep-alive缓存路由后,已经解决了主要问题,但是有新的问题出现.缓存过的组件重
新被激活时不会记录滚动条的状态,默认置顶,所以应该监听这个被复用的组件的onscroll事
件培此,动态记录滚动条的位置状态,然后重新赋值给scrollTop（如果还想优化最好给滚动事件来
一个防抖处理）.那么问题来了,应该在何时重新赋值呢?上面用法中提到了当组件在 内被切换时会触发activated这个钩子函数,所以应今天这一节赋值. 以上就是土嘎嘎小编大虾米为大家整理的相关主题介绍,如果您觉得小编更新的文章只要能对粉丝们有用，就是我们最大的鼓励和动力,不要忘记讲本站分享给您身边的朋友哦！！