vue router.beforeEach(({meta, path}, from, next)与router.afterEach((to, from)

Navigation and hook functions:

Navigation: Routing is changing Keywords: Routing changing

Hook function: call different node functions at different stages of route switching (the hook function is in my opinion: a function triggered by a certain node and timing).

The hook function is mainly used to intercept the navigation, let it complete the jump or cancel, execute different functions in different stages of the navigation, and finally the execution result of the hook function will tell the navigation how to do it. .

The navigation waits until all hooks resolve, waiting for the hook function to tell it what to do next. Use next() to specify.

Let me give you an example of logging in. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

[javascript]view plaincopy 
router.beforeEach(({meta, path}, from, next) => {　　  
  
　　const  {auth =  true } = meta       // meta represents the meta object in to, and path represents the path object in to  
  
　　var  isLogin = Boolean(store.state.user.id)     // true user is logged in, false user is not logged in　  
　　  
　　if  (auth && !isLogin && path !==  '/login' ) {    // auth means user authentication is required, the default is true, which means authentication is required, false means no verification  
　　　　return  next({ path:  '/login'  })    // Jump to the login page  
　　}  
  
  
　　next()    // go to the next hook function  
})  

Let's talk about the hook function of beforeEach first, it is a global before hook function, (before each) means that it has to be executed every time each route changes .

Its three parameters:

to: (Route路由对象) The attributes below the to object of the target routing object to be entered : path params query hash fullPath matched name meta (under matched, but it can be used directly in this example)
from: (Route路由对象) The route the current navigation is leaving
next: (Function函数) Be sure to call this method to resolve the hook. Calling method: next (parameter or empty) ***Must be called

next(无参数的时候): Go to the next hook in the pipeline. If you go to the last hook function, the state of the navigation is confirmed (confirmed)

next('/') Or next({ path: '/' }): jump to a different address . The current navigation is interrupted and a new one is made.

The global afterEach hook of the global hook function:

　　after The hook has no next method and cannot change the navigation. It means that after the navigation has been determined, there is an attached execution hook function.

Hook function inside the component: ( beforeRouteEnter and beforeRouteLeave 再加一个 watch函数）

The in-component hook functions of vue2.X have been reduced a lot compared to vue1.X. .

Use the component's own lifecycle hooks instead activate and deactivate
$router Used on to watcher respond to route changes
canActivatebeforeEnter Can be implemented in router configuration
canDeactivate Has been beforeRouteLeave superseded, the latter is specified in a component's root-level definition. This hook function is called with the instance of the component as its context.
canReuse Removed because it was confusing and rarely used.
The data(to, from, next) hook that uses ajax to get data is replaced with beforeRouteEnter (to, from, next) in the component

vue router.beforeEach(({meta, path}, from, next)与router.afterEach((to, from)

The global afterEach hook of the global hook function:

Guess you like