vue-router过渡动画实现左右滑动

使用钩子函数： beforeRouteUpdate。
原理：一个页面是有二级导航的，在切换二级导航的时候，对应的内容是在变化的；这个页面是复用的，只会生成一次，切换二级导航的时，如何知道导航在更新呢？
一个页面有二级导航的时候，点击二级导航的时候导航路径更新了，会触发路由钩子函数beforeRouteUpdate。

代码示例

1.name是定义的过渡动画的名称

  <keep-alive>
      <transition :name="transitionName">
        <router-view/>
      </transition>
    </keep-alive>

2.mounted中定义组件路由钩子函数beforeRouteUpdate：

  beforeRouteUpdate(to, from, next) {
   
    const tp = to.path;
    const fp = from.path;
 
    let leftPaths = [
      `fp === "/edit" && tp === "/edit/rename"`,
      `fp === "/edit" && tp ===