01. Navigation Guard

(1) Concept

  • Navigation guard is mainly used to guard navigation by jumping or canceling

(2) Classification

(a) Global guard

  • Global front-guard: router.beforeeach

  • Global resolution guard: router. BeforeResolve

  • Global post-hook: router.aftereach

    Each guard method can receive three arguments

    • To: indicates the destination route object to be traveled to

    • From: Indicates the route object that is currently leaving

    • Next: a method whose execution depends on the call parameter of the navigational guard

      • Next () : permits access to the destination route

      • Next (false) : Interrupts current navigation

      • Next (‘/’) : Interrupts the current navigation and jumps to a new route

        • The internal parameter Settings are the same as the route forward parameter Settings

      • Next (error) : Terminates the navigation and passes an error instance

        • This error instance will be received by a callback registered with router.onerror ()

          router.onError(callback= > { 
    console.log('Wrong! ', callback);
});
Copy the code
    // Global front-guard
router.beforeEach((to, from, next) = > {
    For example, here is a route to the home page
    if(to.path === '/login') {
        // If the login page [/login] is displayed, the system permits the login
        next()
    }else {
        // If the destination page is not the login page, forcibly redirect to the login page [/login]
        next('/login')}})Copy the code
    // Global parse guard
router.beforeResolve((to, from, next) = > {
    // Here is an example of an error
    next(error) // This error will be passed as an argument to the onError method
})
router.onError(callback= > { 
    console.log('WoW, something went wrong! ', callback)
});
Copy the code

    The difference between global front-guard and global parse guard:

    • Both are in theBefore jumping routeThe trigger
      • However, the global resolution guard is triggered after all the intra-component guards and asynchronous routing components have been resolved, before the navigation has been confirmed
      • That is, inafterEachbeforebeforeEachandbeforeRouteEnterorbeforeRouteUpdateafter
    // Global post-hook
router.afterEach((to, from) = > {
  // ...
})
Copy the code

    The global post-hook does not accept the next argument, which fires after the route jump has completed and does not change the navigation

(b) Route exclusive guard

  • Guard configured individually for a routing object: beforeEnter

    • The route object has only one hook and needs to be in theroutesTo configure
    • The methods and parameters of route exclusive guard are the same as those of global front-guard
    const routes = [{
    path: '/user'.name: 'User'.component: User,
    beforeEnter: (to, from, next) = > {
        // do something}}]Copy the code

(c) Component internal guard

  • The following guards can be defined inside the component

    • beforeRouteEnter: called before entering the route but before the component instance is created
      • Component instances cannot be obtained at this stagethis
      • But it can be done by givingnext()Method passes a callback to access the component instance
    • beforeRouteUpdate: called when the route changes but the same component is used again
      • Such as:/user1Jump touser/2
    • beforeRouteLeave: called when leaving the current route
    export default {
    beforeRouteEnter(to, from, next) {
        next( vm= > {
            // Access component instances through [VM]})},beforeRouteUpdate(to, from, next) {
        // Called when the current route changes but the component is being reused
    },
    beforeRouteLeave(to, from, next) {
        // called when navigating away from the component's corresponding route}}Copy the code

(3) Analysis process

  • See official website for details

02. Listen for router changes

  • Changes to parameters or queries do not trigger entry (exit) navigational guards

    • But you can do it by listening in$routeObject to cope with these changes, or usebeforeRouteUpdateThe component inside guard

  • Use watch to monitor route changes

    export default {
    watch: {
        $route(to, from) {// do something}}}Copy the code