vue router global guard

https://medium.com/p/6343d7be5e6c

by Quique Fdez Guerra

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<div id="app">
  <router-link to="/">/root</router-link>
  <router-link to="/page1">/page1</router-link>
  <router-link to="/page2">/page2</router-link>
  <router-view></router-view>
</div>

JavaScript

const Root = { template: '<div>Root</div>' }
const Page1 = { template: '<div>Page1</div>' }
const Page2 = { template: '<div>Page2</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Root },
    { path: '/page1', component: Page1 },
    { path: '/page2', component: Page2 }
  ]
})

router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  next()
})

router.afterEach((to, from) => {
  console.log('afterEach')
})

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