Learn Vue JS course Learn Javascript and Vue JS Learn VueJS course Learn VueJS Tutorial

Vue.js 3 Options API Masterclass

In Component Navigation Guards with Vue Router thumbnail image

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
vuejs-masterclass

The Composition API Masterclass is coming soon!

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.