Route navigation guards are a feature in Vue.js that allow developers to execute code when navigating to or leaving a specific route. Route navigation guards can be used for many different use cases, such as:
- Permission Control: Before users navigate to a specific route, check that they have the correct permissions.
- Form Validation: Make sure the form is filled and the data saved before the user leaves a specific route.
- Analytics: When navigating to a specific route, the user's behavior is recorded and sent to the analytics platform.
Vue.js provides three different types of route navigation guards:
- Global Navigation Guards: Navigation guards that can be used anywhere in the application.
- Route-specific guards: Navigation guards defined within a single route.
- Guards within components: Navigation guards defined within components.
These guards provide a flexible mechanism for developers to implement complex navigation logic in their applications. By using route navigation guards, you can ensure that your application behaves as expected and improve the user experience.
example
Global Navigation Guard
For example, the following code demonstrates how to check if the user is logged in in the global navigation guard:
router.beforeEach((to, from, next) => {
const isLoggedIn = auth.isLoggedIn()
if (to.meta.requiresAuth && !isLoggedIn) {
next('/login')
} else {
next()
}
})
In this example, the beforeEach method is used to define global navigation guards. This guard is triggered every time before navigating to a new route. This guard checks if the user is already logged in. If the user is not logged in and the target route requires authorization to access, it will redirect the user to the login page. If the user is already logged in or the target route does not require authorization, it continues navigating to the target route.
Route exclusive guards
Route-specific guards are navigation guards defined within a single route. For example, the following code demonstrates how to check whether the user has permission to access the current route in a route-only guard:
const router = new VueRouter({
routes: [
{
path: '/admin',
component: Admin,
meta: {
requiresAuth: true },
beforeEnter: (to, from, next) => {
const isLoggedIn = auth.isLoggedIn()
if (!isLoggedIn) {
next('/login')
} else {
next()
}
}
}
]
})
In this example, the beforeEnter method is used to define route-only guards. This guard checks if the user is logged in and has permission to access the current route. If the user is not logged in or has no access rights, it redirects the user to the login page. If the user is already logged in and has access, it continues navigating to the current route.
Guards within components
In-component guards are navigation guards defined within the component. For example, the following code demonstrates how to check whether the user has completed the form in a guard inside a component:
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
beforeRouteLeave(to, from, next) {
if (this.form.username !== '' && this.form.password !== '') {
next()
} else {
if (confirm('Are you sure you want to leave this page? Your changes will not be saved.')) {
next()
} else {
next(false)
}
}
}
}
In this example, the beforeRouteLeave method is used to define guards inside the component. This guard checks to see if the user has completed the form. If the form is already filled, it continues to navigate to the next route. If the form is not completed, it will pop up a confirmation box to prompt the user to confirm to leave the current page. If the user decides to leave the current page, it will continue to navigate to the next route. If the user cancels to leave the current page, it cancels the navigation to the next route.