编程类型:
JavaScript + css
技能点:
任务要求(按实现步骤对任务进行分解):
让你的组件在进行路由跳转时,具备以下能力:
- 进入路由组件展示动画
- 离开路由组件展示动画
- 进入路由组件读取数据,渲染视图
- 后退路由组件无需重新读取数据、渲染视图,并且可以保存离开组件时的滚动位置
任务提示/思路分析:
可以尝试把大功能分成多个小功能进行分别实现。
比如:
- 先通过 keepAlive 实现组件的缓存,保证组件不被销毁(PS:但是要注意,并非所有的组件都需要保存哦)
- 然后考虑如何为组件添加路由跳转动画,此处可以借鉴 VueRouter 基于路由的过渡动效 的官方示例
- 最后再考虑保存滚动位置的问题