Vue Navigation Guards

up:: Vue Methods that automatically get called by Vue Router.

Coming to a page

beforeEach (global)

In main.js.

router.beforeEach(
	function(to, from, next) {
		next() // allow routing
		next(false) // cancel routing
	}
);

• to: where you are going
• from: where you came from
• next(): confirm or cancel
  • or pass in a string/direction object where to redirect the user to
  • Warning: This triggers on each re-route, means that you can create an infinite loop if you don’t add an if statement.

beforeEnter (page)

Add this on the Vue Router configuration object.

Or in the component config object:

beforeRouteEnter(to, from, next) {
	next(false); // deny
}

afterEach (global)

Runs after a navigation has happened. It has no next param. But you could use it for analytics.

Leaving a page

beforeRouteLeave

Called before the entering on a site guards.

Handy to give users a warning before leaving with unsaved changes.