Using routing and hook functions in Vue2.X

Below I will share with you a detailed explanation of routing and hook functions based on Vue2.X. ​​It has a good reference value and I hope it will be helpful to everyone.

I’ve been a little busy at work recently. I haven’t updated my articles for a long time, and I haven’t learned anything new.

Let’s talk about this routing hook today.

Navigation and hook functions:

Navigation: routing is changing Keywords: routing changes

Hook function: in Different node functions are called at different stages of route switching (in my opinion, the hook function is: 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, and execute different functions at different stages of the navigation. Finally, the execution result of the hook function will tell the navigation what to do. .

The navigation is waiting until all hooks are resolved, waiting 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代表的是to中的meta对象，path代表的是to中的path对象 
 
　　var isLogin = Boolean(store.state.user.id) // true用户已登录， false用户未登录　 
　　 
　　if (auth && !isLogin && path !== '/login') { // auth 代表需要通过用户身份验证，默认为true，代表需要被验证， false为不用检验 
　　　　return next({ path: '/login' }) // 跳转到login页面 
　　} 
 
 
　　next() // 进行下一个钩子函数 
})

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

Its three parameters:

to: (Route routing object) The target routing object that is about to enter Attributes under the to object: path params query hash fullPath matched name meta (under matched, but this example can be used directly)

from: (Route routing object) The current navigation is about to leave The route

next: (Function function) must call this method to resolve this hook. Calling method: next (parameter or empty) ***Must call

next (without parameters): Carry out the next hook in the pipeline. If you reach the last hook function, 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 started.

The global afterEach hook of the global hook function:

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

Hook function in the component: (beforeRouteEnter and beforeRouteLeave plus a watch function)

In the vue2.X component The hook function is much smaller than vue1.X. .

Use the component's own life cycle hook function to replace activate and deactivate

Use a watcher on $router to respond to routing changes

canActivate can be used by beforeEnter in the router configuration The implementation of

canDeactivate has been replaced by beforeRouteLeave, which is specified in the root-level definition of a component. This hook function is called with the component instance as its context.

canReuse has been removed because it was confusing and rarely used.

Use ajax to get the data data(to, from, next) hook and use beforeRouteEnter (to, from, next) in the component instead

The above is what I compiled for everyone, I hope it will be used in the future Helpful to everyone.

Related articles:

Cross-domain issues with proxyTable in the vue-cli project

How to use refs in React components

Detailed explanation of using devtool in webpack

The above is the detailed content of Using routing and hook functions in Vue2.X. For more information, please follow other related articles on the PHP Chinese website!