自动判断路由是前进还是后退,从而实现对应转场效果

[lsxm]

目前无法自动识别路由是前进还是后退,通过数组队列进行简单的判断,达到了调用router.back或浏览器后退能准确触发后退转场动画.

[jaweii]

目前是根据URL深度(反斜杠数)来判断前进后退的，比如从/user到/user/_id则为前进，反之后退。
但你这样修改后就不再支持这个功能了。

[lsxm]

if (toDepth === fromDepth) { if (lastPath === to.path && toDepth < fromDepth) { transitionType = 'back' } else { transitionType = 'forward' }
这是你原本的代码有个BUG,在if (toDepth === fromDepth)的情况下,if (lastPath === to.path && toDepth < fromDepth)其实是永不成立的,,也就是说不论lastPath === to.path与否,永远都是执行transitionType = 'forward'前进的过场动画.

[lsxm]

单页应用通常入口都是固定的,且中间不会再有刷新页面的操作,如果能用临时数组记录从入口页开始的所有路由记录,并根据路由的变化准确地对数组进行增减,就能自动识别出路由的过场类型.当然如果担心中途页面被刷新,可以把pathArr放到sessionStorage里也是个不错的选择.

[lsxm]

目前是根据URL深度(反斜杠数)来判断前进后退的，比如从/user到/user/_id则为前进，反之后退。
但你这样修改后就不再支持这个功能了。

我的代码是写在if (toDepth === fromDepth)里面的,所以并不会影响到你的按url深度判断类型,其实按深度并不是个好主意,因为现在很多项目都是用require.context('@/views',true,/.vue$/);去自动生成路由规则的,这种情况都是同级路由的,我想作为一个懒人开发者并不会去建太多级的子目录.当然如果能以配置参数的方式让开发者自己选择要用深度判断,或者浏览轨迹判断就更完美了

[jaweii]

if (toDepth === fromDepth) { if (lastPath === to.path && toDepth < fromDepth) { transitionType = 'back' } else { transitionType = 'forward' }
这是你原本的代码有个BUG,在if (toDepth === fromDepth)的情况下,if (lastPath === to.path && toDepth < fromDepth)其实是永不成立的,,也就是说不论lastPath === to.path与否,永远都是执行transitionType = 'forward'前进的过场动画.

当从页面从/user转到/user/_id后，lastPath值为/uesr，此时从/user/_id转到/user，就会满足这个条件。

[jaweii]

你可以不要把原来的if删掉，而是基于原来的条件||上你的条件，这样就完美了。

[lsxm]

if (toDepth === fromDepth) { if (lastPath === to.path && toDepth < fromDepth) { transitionType = 'back' } else { transitionType = 'forward' }
这是你原本的代码有个BUG,在if (toDepth === fromDepth)的情况下,if (lastPath === to.path && toDepth < fromDepth)其实是永不成立的,,也就是说不论lastPath === to.path与否,永远都是执行transitionType = 'forward'前进的过场动画.

当从页面从/user转到/user/_id后，lastPath值为/uesr，此时从/user/_id转到/user，就会满足这个条件。

我并不是说lastPath === to.path不会成立,我是说if (toDepth === fromDepth) 下面你又写了if (toDepth < fromDepth),注意加粗的那部分,你上面已经判断了a==b,那么下面的a<b自然永不成立了

[jaweii]

的确是Bug，去掉&& toDepth < fromDepth就能正常使用了，所以没必要加个数组的。

[lsxm]

的确是Bug，去掉&& toDepth < fromDepth就能正常使用了，所以没必要加个数组的。

只去掉这个条件也是不行的,第一次返回转场正确,但第二次跳转时方向就错了.你可以自己多测试一下,就知道加数组的必要性了

[hezhongfeng]

可以参考一下我的实现方式，必须维护一个UI栈，通过动态参数的方式确定是前进还是后退，还支持多个相同页面，比如 商品->店铺->商品，都是可以完整回退的。
https://github.com/hezhongfeng/vue-page-stack