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
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() });
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() })
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.
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("我离开啦"); });
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!!!
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.