Detailed explanation of the routing and hook functions based on Vue2.X, and detailed explanation of the vue2.x Hook Functions

Detailed explanation of the routing and hook functions based on Vue2.X, and detailed explanation of the vue2.x Hook Functions

I have been busy working recently. I haven't updated my articles for a long time, and I haven't learned new things.

Let's talk about this routing hook today.

Navigation and hook functions:

Navigation: Route changing. Keyword: Route changing.

Hook Function: Call different node functions at different stages of Route switching (hook function is a function triggered by a node or a time ).

The hook function is mainly used to intercept navigation and let it jump or cancel. Different functions are executed at different stages of navigation, and the execution result of the hook function will tell the navigation how to do it ..

The navigation bar remains in the waiting state until all hooks are resolve complete. Wait for the hook function to tell it what to do next. Use next () to specify.

Let me give you an example of login.

Router. beforeEach ({meta, path}, from, next) =>{ const {auth = true} = meta // meta indicates the meta object in, path indicates the path object var isLogin = Boolean (store. state. user. id) // true: the user is logged on. false: the user is not logged on. if (auth &&! IsLogin & path! = '/Login') {// auth indicates that user authentication is required. The default value is true, indicating that the user needs to be verified. false indicates that return next ({path: '/login'}) // jump to the login page} next () // perform the next hook function })

Let's talk about this beforeEach hook function. It is a global before hook function. (before each) means to execute it once every time a route changes.

Its three parameters:

To:(Route object) attributes of the target Route object to be entered: path params query hash fullPath matched name meta (under matched, but this example can be used directly)

From:(Route object) Route to which the current navigation is about to exit

Next:(Function) must call this method to resolve the hook. Call method: next (parameter or null) *** must be called

Next (when there is no parameter): Perform the next hook in the pipeline. If the last hook function is reached, the navigation status is confirmed (confirmed)

Next ('/') or next ({path: '/'}): jump to a different address. The current navigation is interrupted and a new navigation is performed.

Global afterEach hook of global hook function:

The after Hook does not have the next method and cannot change the navigation. It indicates that after you have determined how to execute the navigation, an execution hook function is attached.

Hook Functions in the component:(BeforeRouteEnter and beforeRouteLeave Add a watch function)

Vue2.X has fewer hook functions than vue1.X ..

Use the lifecycle hook function of the component to replace activate and deactivate.

Use watcher on $ router to respond to route changes

CanActivate can be implemented by beforeEnter in the configuration of the router.

CanDeactivate has been replaced by beforeRouteLeave, which is specified in the root-Level Definition of a component. This hook function uses the instance of the component as its context when calling.

CanReuse has been removed because it is confusing and rarely used.

Use the beforeRouteEnter (to, from, next) Hook of ajax to obtain data.

The preceding detailed explanation of the routes and hook functions based on Vue2.X is a part of the Content shared by Alibaba Cloud. I hope to give you a reference and support for the customer's house.