JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.min.js"></script>
<div id="app"></div>

JavaScript

Vue.use(VueRouter)

// Use Vue.extend, beforeRouteEnter not working here
const Page1 = Vue.extend({
  template: '<div>1</div>',
  beforeRouteEnter(route, redirect, next) {
    next(vm => {
      console.log('In page 1')      
    })
  },
  beforeRouteLeave(route, redirect, next) {
  	console.log('Leave from page 1')
    next(vm => {})
  }
})

const Page2 = {
  template: '<div>2</div>',
  beforeRouteEnter(route, redirect, next) {
  	console.log(redirect);
  	console.log(route);
    next(vm => {
      console.log('In page 2',vm)
    })
  },
  beforeRouteLeave(route, redirect, next) {
  	console.log(redirect);
  	console.log(route);
  	console.log('Leave from page 2');
    next(vm => {})
  }
}

const router = new VueRouter({
  routes: [{
    path: '/p1',
    component: Page1
  }, {
    path: '/p2',
    component: Page2
  }]
})

new Vue({
  router,
  template: `
    <div id="app">
      <h1>Routes</h1>
      <ul>
        <li><router-link to="/p1">/p1</router-link></li>
        <li><router-link to="/p2">/p2</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `,
  methods: {}
}).$mount('#app')