----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Global guard

router.beforeEach((to,from,next)=>{
        //Jump from From to
        // To: Routing object to the destination to be reached
        //from: Currently navigates away routing objects
        //Next: Call this method before going to the next hook
        //You can use the Navigation Guard to modify page titles
        document.title = to.matched[0].meta.title
})

The global hook does not require an active call to the next() function

router.afterEach((to，from)=>{

})

-------------------------------------------------------------------------------

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
          console.log("aaaaaaaaaaa")
                    next()
      }
    }
  ]
})

-----------------------------------------------------------------------------------------------------------

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // Called before rendering the component's corresponding route is confirm ed
    // Cannot get component instance`this`
    // Because the component instance was not created before the hook was executed
  },
  beforeRouteUpdate (to, from, next) {
    // Called when the current route changes but the component is multiplexed
    // For example, for a path/foo/:id with dynamic parameters, when jumping between/foo/1 and/foo/2,
    // Because the same Foo components are rendered, the component instances are reused.This hook is called in this case.
    // Accessible Component Instances`this`
  },
  beforeRouteLeave (to, from, next) {
    // Called when navigating away from the component's corresponding route
        //This leave hook is usually used to prevent users from leaving abruptly before their changes have been saved.You can cancel navigation by next(false).Also note that there must be this next(), which is equivalent to a button on.
    // Accessible Component Instances`this`
  }
}

beforeRouteLeave uses scenarios in three categories:
1. Clear the timer in the current component. When there is a timer in a component and the route is switched, beforeRouteLeave can be used to clear the timer to avoid memory consumption:

beforeRouteLeave (to, from, next) {
 window.clearInterval(this.timer) //Clear timer
 next()
}

2. Prevent page jumps when there are open windows or unsaved content on the page. Users should be prevented from jumping if important information on the page needs to be saved by the user before it can be jumped or if there are pop-ups.

beforeRouteLeave (to, from, next) {
 //Determine whether pop-up box status and save information
 if (this.dialogVisibility === true) {
  this.dialogVisibility = false //Close the pop-up box
  next(false) //Go back to the current page and prevent page jumps
 }else if(this.saveMessage === false) {
  //pop-up warning
  next(false) //Go back to the current page and prevent page jumps
 }else {
  next() //Otherwise, jumps are allowed
 }
}

3. Save relevant content in Vuex or Session. When users need to close the page, they can save common information in session or Vuex.

beforeRouteLeave (to, from, next) {
  localStorage.setItem(name, content); //Save to localStorage
  next()
}