Here, we use the hook function of routing. The component route is beforeRouteUpdate.

A page has two-level navigation. When switching two-level navigation, the corresponding content is changing. This page is reused and will only be generated once. When switching two-level navigation, how do you know that the navigation is updating?

When a page has two-level navigation, click the two-level navigation to update the navigation path, and the route hook function beforeRouteUpdate will be triggered.

Applications in Vue templates:

Name is the name of the defined transition animation

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

The component routing hook function beforeRouteUpdate is defined in mounted:

  beforeRouteUpdate(to, from, next) {
    const tp = to.path;
    const fp = from.path;

    let leftPaths = [
      `fp === "/edit" && tp === "/edit/rename"`,
      `fp === "/edit" && tp === "/edit/interest"`
    ];
    let rightPaths = [
      `fp === "/edit/rename" && tp === "/edit"`,
      `fp === "/edit/interest" && tp === "/edit"`
    ];

    this.leftSlide(leftPaths, fp, tp);
    this.rightSlide(rightPaths, fp, tp);

    setTimeout(() => {
      next()
    }, 50)
  },

 

methods:

    leftSlide(paths, fp, tp) {
      paths.forEach(path => {
        if (eval(path)) {
          this.transitionName = 'slide-left';
        }
      })
    },
    rightSlide(paths, fp, tp) {
      paths.forEach(path => {
        if (eval(path)) {
          this.transitionName = 'slide-right';
        }
      })
    },

Define the global class:

.slide-left-enter {
  transform: translateX(100%);
}
.slide-left-enter-active{
  transition: transform .3s;
}
.slide-left-enter-to{
  transform: translateX(0);
}
.slide-left-leave {
  transform: translateX(0);
}
.slide-left-leave-active {
  transition: transform .3s
}
.slide-left-leave-to {
  transform: translateX(0);
}

.slide-right-enter {
  transform: translateX(0);
}
.slide-right-enter-active{
  transition: transform .3s;
}
.slide-right-enter-to{
  transform: translateX(0);
}
.slide-right-leave {
  transform: translateX(0);
}
.slide-right-leave-active {
  transition: transform .3s;
}
.slide-right-leave-to {
  transform: translateX(100%);
}