From the course: Building Laravel and Vue.js 2 Web Apps

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Using Vue Router navigation guards

Using Vue Router navigation guards

From the course: Building Laravel and Vue.js 2 Web Apps

Start my 1-month free trial

Using Vue Router navigation guards

“

- [Instructor] Next, we'll discover a minor bug with our navigation logic, and use a View Router Navigation Guard to fix it. One problem we have is if we start to update an item, or just view it, and then we decide that instead of saving it, we want to go and add a new item, the form here is not cleared because View will recognize that the View Router component will continue to be a menu item component, and it will just reuse it, instead of destroying and recreating it. Luckily, View Router has a Navigation Guards feature. These are sort of like hooks or middleware and are often used to cancel navigation or redirect it when switching routes. But we can make use of one here to make sure our menu item component is properly reset when we're switching from the Edit Item route to the Add Item route. Getting the logic right might take a little experimentation. There are a lot of different ways to use these navigation guards, and I would suggest reading this whole page in the View Router…

Contents