完整的導航解析流程

1. 導航被觸發。
2. 在失活的元件裡呼叫beforeRouteLeave守衛。
3. 呼叫全域性的beforeEach守衛。
4. 在重用的元件裡呼叫beforeRouteUpdate守衛 (2.2+)。
5. 在路由配置裡呼叫beforeEnter。
6. 解析非同步路由元件。
7. 在被啟用的元件裡呼叫beforeRouteEnter。
8. 呼叫全域性的beforeResolve守衛 (2.5+)。
9. 導航被確認。
10. 呼叫全域性的afterEach鉤子。
11. 觸發 DOM 更新。
12. 呼叫beforeRouteEnter守衛中傳給next的回撥函式，建立好的元件例項會作為回撥函式的引數傳入。

import Vue from 'vue'
import Router from 
 
'vue-router'

Vue.use(Router)

let router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('../page/home')
    },
    {
      path: '/ads',
      name: 'Ads',
      component: () => import('../page/ads'),

    },
    {
      path: '/login',
      name: 
 
'Login',
      component: () => import('../page/login')
    },

    {
      path: '/detail',
      name: 'Detail',
      component: () => import('../page/detail'),
      // 路由獨享守衛
      beforeEnter: (to, from, next) => {
        console.log(to, 'to', from, 'from', 'beforeEnter')
        next()
      }
    },
  ]
})



 
//全域性前置路由守衛
router.beforeEach((to, from, next) => {
  console.log(to, 'to', from, 'from', 1)
  console.log(to.name === 'Ads', from.name == 'Login')
  next()
})

//全域性解析守衛
router.beforeResolve((to, from, next) => {
  console.log(to, 'to', from, 'from', 2)
  next()
})


//全域性後置鉤子
router.afterEach((to, from) => {
  console.log(to, 'to', from, 'from', 3)
})
export default router;