JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>
<div id="app">
  <h1>title</h1>
  <nav>
    <router-link to="/">home</router-link> |
    <router-link :to="{name: 'CONTACT'}">contact</router-link> |
    <router-link :to="{name: 'HOME', query: {ref: 'ext'}}">
      home with query
    </router-link>
  </nav>
  <router-view></router-view>
</div>

Vue

const HOME = {
	template: '<p> hello, I`m the home page </p>',
	beforeRouteEnter(to, from, next) {
  	console.log('beforeRouteEnter: HOME')
    next()
  },
  beforeRouteUpdate(to, from, next) {
  	console.log('beforeRouteUpdate: HOME')
    next()
  },
  beforeRouteLeave(to, from, next) {
  	console.log('beforeRouteLeave: HOME')
    next()
  }
}
const CONTACT = {
	template: '<div> <h2>Contact page</h2> <p>[email protected]</p> </div>',
	beforeRouteEnter(to, from, next) {
  	console.log('beforeRouteEnter: CONTACT')
    next()
  },
  beforeRouteUpdate(to, from, next) {
  	console.log('beforeRouteUpdate: HOME')
    next()
  },
  beforeRouteLeave(to, from, next) {
  	console.log('beforeRouteLeave: HOME')
    next()
  }
}

const routes = [
	{
  	path: '/',
  	name: 'HOME',
    beforeEnter(to, from, next) {
    	console.log('beforeEnter: HOME')
    	next()
    },
    component: HOME
  },
  {
  	path: '/contact-us',
    name: 'CONTACT',
    beforeEnter(to, from, next) {
    	console.log('beforeEnter: CONTACT')
    	next()
    },
    component: CONTACT
  }
]

const router = new VueRouter({
	routes
})

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

const app = new Vue({
	el: '#app',
  router,
  mounted() {
    console.log('app mounted');
  },
})