vue router 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, 
    	beforeEnter: (to, from, next) => {
      	console.log('beforeEnter Root')
        next()
      }
    },
    { 
    	path: '/page1', 
    	component: Page1, 
    	beforeEnter: (to, from, next) => {
      	console.log('beforeEnter Page 1')
        next()
      }
    },
    { 
    	path: '/page2', 
    	component: Page2, 
    	beforeEnter: (to, from, next) => {
      	console.log('beforeEnter Page 2')
        next()
      }
    },
  ]
})

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

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

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