preface

Recently in finishing the foundation, welcome to dig friends together to exchange learning, pay attention to the public number front end self-study community has egg oh! 🎉 🎉 🎉

Vue Router Indicates the route guard

Mapping directory

    1. Routing Guard classification
    1. Global route guard
    1. Single route guard
    1. Component route guard
    1. The complete process of routing guard execution

Routing Guard classification

  • The global routing
  • A single route is exclusive
  • Component Internal Routing

Each router guard hook function takes three arguments:

To: indicates the inbound destination route

From: indicates the outbound route

Next: Controls the operations performed during route hops. This operation must be performed.

It has four behaviors:

Next () : The hooks are finished and the next route is entered.

Next (false): Interrupts the route to enter the next route.

Next (‘/’) : Enter the corresponding route according to your route jump criteria, / is the path of the route.

Next (new Error) : Interrupts the route jump, and the Error is passed to the callback registered with router.onerror ().

Global route guard

  • BeforeEach (to, from, next)
  • BeforeResolve (to, from, next)
  • AfterEach (to, from)

Global routes are mounted directly to the Router instance.

// Verify routes globally
const router = createRouter({
  history: createWebHashHistory(),
  routes
});

// Whitelist routes that do not require authentication
const whiteList = ['/'.'/register']

router.beforeEach((to,from,next) = >{
  if(whiteList.indexOf(to.path) === 0) {
    // Let go to the next route
    next()
  } else if(! (sessionStorage.getItem('token'))){
    next('/');     
  } else {
    next()
  }  
})
Copy the code

beforeEach

Usage scenarios

The route was triggered before the route jumped. Procedure

role

Often used for login authentication

beforeResolve

Usage scenarios

AfterEach is called before beforeRouteEnter after beforeEach and within the component.

afterEach

Usage scenarios
  1. Occurs after beforeEach and beforeResolve and before beforeRouteEnter.
  2. Routes are executed after they are triggered

A single route is exclusive

It has only one hook function, beforeEnter (to, From, Next)

beforeEnter

Usage scenarios

Execute after beforeEach, as it does, not very often

      {
        path:'/superior'.component: Superior,
        meta: {icon:'el-icon-s-check'.title:'Superior file'
        },
        beforeEnter:(to,form,next) = >{}}Copy the code

Component route guard

Features:

A hook function executed within a component

Hook functions:
  • beforeRouteEnter(to,from,next)
  • beforeRouteUpdate(to,from,next)
  • beforeRouteLeave(to,from,next)

beforeRouteEnter

Usage Scenarios:
  1. Called before route entry.
  2. Unable to get components thisInstance, because the component instance has not been created before the route enters the component.
Execution order

BeforeEach and exclusive guards beforeEnter, global beforeResolve and global afterEach are called before.

beforeRouteUpdate

Usage Scenarios:
  1. Called when the current route changes and the component is being reused, the instance can be accessed through this.
  2. This guard is called when the current route query changes.

beforeRouteLeave

Usage Scenarios:

Called when navigating away from the corresponding route of the component, which can be accessed by the component instance this

The complete process of routing guard execution

  1. Navigation triggered
  2. Execute component internal routing guard:beforeRouteLeave
  3. Perform global route guardbeforeEach
  4. Internal routing guard hooks in reuse components beforeRouteUpdate
  5. Execute the hook in the route beforeEnter
  6. Call beforeRouteEnter in the activated component
  7. Performs the global beforeResolve guard.
  8. Executes the global afterEach hook
  9. beforeCreate
  10. created
  11. beforeMount
  12. mounted
  13. Execute the callback to Next of beforeRouteEnter, and the created component instance is passed in as an argument to the callback function.

conclusion

❤️ attention + like + collection + comment + forward ❤️, the original is not easy, encourage the author to create better articles pay attention to the public number front-end self-study community, you can get more front-end high-quality articles! After paying attention to the reply keyword “add group”, you can join the “front-end self-study communication group”, learning progress together. After paying attention to add my wechat pull you into the technical exchange group welcome to pay attention to the public number, more wonderful articles only in the public number push