个根路由组件(app下的根路由组件, 须要滚动切换的作为其子组件)
在根路由组件增加鼠标滚动工夫监听, 在mounted中调用监听
当跳转到其余路由(跳出这个根路由时), 根路由组件会被销毁, 因而在根路由的destroed钩子函数中革除掉事件监听
Vue路由切换过渡
vue的过渡
应用transition 包裹须要过渡的组件, 或者是一个div, 或者是一个路由, 当这个创立或者销毁的时候, 会加载指定的动画成果, 这个动画成果须要本人指定, 这里指定的是transitionName
而后在data外面申明这个, 然而这个值赋值为' ', 因为须要依据路由向前或者向后对应不同的name
当路由向前(这里是向下), 指定为slide-down
而后定义slide-down的不同状态下的激活成果为过渡成果
随后定义进入开始动画
定义来到激活动画
上面是个别是固定
即申明-enter-active, -leave-active为过渡成果
随后写-enter, -leave-active具体须要的变动
个别就是一个-enter, 一个-leave-active
接着就是怎么判断路由向前还是向后
首先是怎么向前向后切换路由
接着是怎么判断是前还是后, 在写路由的时候, 写上meta, 通过在"根组件"里监督路由变动时, 拿到路由信息, 比照这两个的大小来判断