Vue Router Navigation Guard sample

by Josh Jang

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Navigation Guard</h1>
  <p>
    <router-link to="/login">Login Page</router-link>
    <router-link to="/home">Home Page</router-link>
  </p>
  <router-view></router-view>
</div>

JavaScript

var Login = { template: '<p>Login Component</p>'};
var Home = { template: '<p>Home Component</p>'};

var router = new VueRouter({
	routes: [
		{path: '/login', component: Login},
		{path: '/home', component: Home}
	]
});

/* router.beforeEach(function (to, from, next) {
  console.log('every single routing is pending');
}); */

new Vue({
	el: '#app',
	router
});