The Vue.js 3 Masterclass
Join our community today
Get your learning on with The Vue.js 3 Masterclass
Get access to the most comprehensive Vue.js video library in the world. Over 300 video lessons including the newest Vue 3 features.
In Component Navigation Guards with Vue Router
🚧 PLEASE NOTE: This masterclass is built with the Options API
The Composition API Masterclass is coming soon!
Sign-up for the Vue.js Masterclass 2024 Edition.
In this lesson, we use Vue Router 4's in component navigation guard beforeRouteEnter to redirect a guest from the profile page to the home page since guests don't have a profile page.
We also examine another common use of an in component navigation guard by utilizing the beforeRouteLeave to alert a user to unsaved changes on the Thread Create page. In doing so, we also get some experience with Vue 3's watch option.