1、全局的鉤子

beforeEach（to，from，next）
afterEach（to，from，next）

2、組建內的導航鉤子

組件內的導航鉤子主要有這三種：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他們是直接在路由組件內部直接進行定義的

methods: {},
beforeRouteLeave (to, from, next) {}

需要注意是：

beforeRouteEnter 不能獲取組件實例 this，因為當守衛執行前，組件實例被沒有被創建出來，剩下兩個鉤子則可以正常獲取組件實例 this

beforeRouteEnter獲取到this實例

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通過 `vm` 訪問組件實例
  })
}

最后是完整的導航解析流程：

1、導航被觸發
2、在失活的組件里調用離開守衛
3、調用全局的 beforeEach 守衛
4、在重用的組件里調用 beforeRouteUpdate 守衛
5、在路由配置里調用 beforEnter
6、解析異步路由組件
7、在被激活的組件里調用 beforeRouteEnter
8、調用全局的 beforeResolve 守衛
9、導航被確認
10、調用全局的 afterEach 鉤子
11、觸發 DOM 更新
12、在創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數

路由攔截登錄例子

import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
const router = new Router({
 routes: [
 {
  path: '/',
  /*
  * 按需加載 
  */
  component: (resolve) => {
  require(['../components/Home'], resolve)
  }
 }, {
  path: '/record',
  name: 'record',
  component: (resolve) => {
  require(['../components/Record'], resolve)
  }
 }, {
  path: '/Register',
  name: 'Register',
  component: (resolve) => {
  require(['../components/Register'], resolve)
  }
 }, {
  path: '/Luck',
  name: 'Luck', 
  // 需要登錄才能進入的頁面可以增加一個meta屬性
  meta: { 
  requireAuth: true
  },
  component: (resolve) => {
  require(['../components/luck28/Luck'], resolve)
  }
 }
 ]
})
// 判斷是否需要登錄權限 以及是否登錄
router.beforeEach((to, from, next) => {
 if (to.matched.some(res => res.meta.requireAuth)) {// 判斷是否需要登錄權限
 if (localStorage.getItem('username')) {// 判斷是否登錄
  next()
 } else {// 沒登錄則跳轉到登錄界面
  next({
  path: '/Register',
  query: {redirect: to.fullPath}
  })
 }
 } else {
 next()
 }
})
 
export default router

當router的mode為history時，去掉#

router.beforeEach((route, redirect, next) => {
  let title = route.meta.title
  document.title = title || ''
  console.log(route.hash)
  if (route.hash !== '') {
    const id = route.hash.replace('#', '')
    const element = document.getElementById(id)
    if (element) element.scrollIntoView()
  }
  if (route.path !== '/') {
    indexScrollTop = document.body.scrollTop
  }
  next()
})
router.afterEach((route, redirect) => {
  if (route.hash !== '') {
    const id = route.hash.replace('#', '')
    const element = document.getElementById(id)
    if (element) element.scrollIntoView()
  }
  if (route.path !== '/') {
    document.body.scrollTop = 0
  } else {
    Vue.nextTick(() => {
      document.body.scrollTop = indexScrollTop
    })
  }
})

這樣就做好了登錄攔截.我們只需在main.js中引入router就可以了.