SOURCE

const Home = { template: '<div>home</div>' }

function guardRoute (to, from, next) {
	console.log('3）调用基于路由的beforeEnter钩子,from:'+from.path+' to:'+to.path)
  next()
}


const Qux = {
  data () {
    return {
    	msg: '',
      prevId: 0
    }
  },
  template: `<div>{{msg}} id:{{ $route.params.id }} prevId:{{ prevId }}</div>`,
    beforeRouteLeave (to, from, next) {
		console.log('2）调用离场组件的beforeRouteLeave钩子. Baz组件')
    next()
  },
   beforeRouteEnter (to, from, next) {
		console.log('8）调用进场组件的beforeRouterEnter钩子，Baz组件')
    setTimeout(() => {
          next(vm => {
            vm.msg = 'Qux'
            console.log('12）运行进场组件在beforeRouterEnter钩子中传给next的回调方法')
          })
        }, 0) 
   },
   beforeRouteUpdate (to, from, next) {
   console.log('4）调用重用组件的beforeRouteUpdate钩子(version 2.2+)')
    this.prevId = from.params.id
    next()
  	}
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    // Qux 实现了beforeRouteEnter钩子
    { path: '/qux', component: Qux, beforeEnter: guardRoute  },
    // beforeRouteUpdate钩子
    { path: '/qux/:id', component: Qux }
  ]
})

router.beforeEach((to, from, next) => {
	console.log('5）调用全局的beforeEach钩子')
  next()
})

router.afterEach((to, from, next) => {
	console.log('10）调用全局的afterEach钩子')
})


router.beforeResolve((to, from, next) => {
	console.log('7）调用全局的beforeResolve钩子(version 2.5+)')
  next()
})
new Vue({
  router,
  el:'#app'
}).$mount('#app')  

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.6/vue-router.js"></script>


<div id="app">
  <h1>导航钩子</h1>
  <ul>
    <li><router-link to="/">/</router-link></li>
    <li><router-link to="/qux">/qux</router-link></li>
    <li><router-link to="/qux/1">/qux/1</router-link></li>
    <li><router-link to="/qux/2">/qux/2</router-link></li>
  </ul>
  <router-view class="view"></router-view>
</div>