How to use navigation guards in Vue3

1. What is a navigation guard?

As its name suggests, the navigation guard provided byvue-routeris mainly used to guard navigation by jumping or canceling. There are many ways to build route navigation into it: globally, exclusive to a single route, or at the component level.

Check the following situation:

By default, clicking the homepage link can directly enter the specified interface, but this interface requires the user to log in before accessing, which is a problem

Navigation guards can be set up to detect whether the user is logged in. If he is logged in, he will enter the background page. If he is not logged in, he will force himself to enter the login page, as shown in the figure

2. What types of navigation guards are there?

1. Global guards (3)

Global front guard

Every time a routing navigation jump occurs, the global front guard will be triggered. Therefore, in the global front guard, programmers can control the access rights of each route

1. How to use

You canrouter/index.jsUserouter.beforeEach((to, from, next) => {})in the page to register a global front guard.

2. Code:

// router/index.js 页面 router.beforeEach((to, from, next) => { console.log(to, from); next() });

Global resolution guard

1. Usage method
You can use router.beforeResolve to register a global guard. This is similar to router.beforeEach in that it fires on every navigation, but ensures that the parsing guard is called correctly before the navigation is confirmed, and after all in-component guards and async route components are parsed.

2. Code:

// router/index.js 页面 router.beforeResolve((to, from, next) => { console.log(to,from); next() })

Global post-hook

1. Usage
You can also register a global post-hook, however Unlike guards, these hooks will not accept the next function nor change the navigation itself:

2. Code:

// router/index.js 页面 router.afterEach((to, from) => { console.log(to,from); })

They are useful for auxiliary functions such as analysis, changing page titles, and declaring pages. Useful for many other things.

2. Route exclusive guard (1)

1. Usage method

You can define it directly in the routing configurationbeforeEnterGuard:

2. Code:

// router/index.js 页面（路由规则中） const routes = [ { path: '/home', name: 'Home', component: HomeView, beforeEnter: (to, from,next) => { console.log(to, from); next() }, }, ]

3. Guards within the component (3)

Component There are three internal guards: beforeRouteEnter before the route enters, beforeRouteLeave when the route leaves, and beforeRouteUpdate when the page is updated

beforeRouteEnter(to, from, next)

1. How to use
in the component Used in templates, written at the same level as methods: {}, component routing guards are routing guards written in each separate vue file

2. Code:

// vue 组件内使用 onBeforeRouteUpdate((to, from) => { //当前组件路由改变后，进行触发 console.log(to); });

Note: in vue3 The beforeRouterEnter route guard cannot be used in the setup function.

beforeRouteUpdate(to, from, next)

1. Usage method
Use in the component template, with methods: {} is written at the same level. The component route guard is the route guard written in each separate vue file

2. Code:

// vue 组件内使用 onBeforeRouteUpdate((to, from) => { //当前组件路由改变后，进行触发 console.log(to); });

beforeRouteLeave(to, from, next)

1. The usage method is used in the component template, which is written at the same level as methods: {}. The component routing guard is the routing guard written in each separate vue file

2. Code:

// vue 组件内使用 onBeforeRouteLeave((to, from) => { //离开当前的组件，触发 alert("我离开啦"); });

3. Three parameters of the navigation guard

• to: The routing information object to be accessed

• from: The one to be left Routing information object

• next: Function

  Call next() to indicate release, allow this route navigation

  Call next(false) to indicate no release , this route navigation is not allowed

  Calling next({routerPath}) means navigating to this address. Generally, when the user is not logged in, he will navigate to the login interface

Tip: This function can appear multiple times in the navigation guard, but can only be called once!!!

4. How to use beforeRouteEnter in vue3

If you are using the combined API and setup functions to write components, you can add update and leave guards through onBeforeRouteUpdate and onBeforeRouteLeave respectively. Please refer to the Composition API section for more details.

For details, please see the official documentation of vue-router
Navigation Guard | Vue Router

Method 1. We can use The beforeEnter method intercepts, that is, in router.js:

{ path: '/', name: 'home component: () => import('@/xxx.vue'), beforeEnter: (to, from) => { // 可以在定义路由的时候监听from和to } }

Method 2. We can also use the vue2 writing method and use the optional api to use the beforeRouterEnter hook.