純小白入手 vue3.0 CLI - 3.3 - 路由的導航守衛

vue3.0 CLI 真小白一步一步入手全教程系列：https://www.cnblogs.com/ndos/category/1295752.html

儘可能把紛繁的知識，肢解重組成爲能夠堆砌的知識。

學會工具並不難，思考如何運用這些工具，纔是編程或者工做中最難的部分。

個人 github 地址 - vue3.0Study - 階段學習成果都會創建分支。

==========================

導航守衛是 vue 中很關鍵的內容之一。路由是否可以切換，怎麼切換，都由它來把關 ( 用它來把關，可使得程序架構脈絡清晰 )。注：路由的切換實際也能夠用 router.push 這個方法來進行控制，可是會使得應用變得難以維護。

導航守衛

vue-router 提供的導航守衛主要用來經過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程當中：全局的, 單個路由獨享的, 或者組件級的。

官網的定義的理解：

一、守衛導航是什麼意思？

路由切換是指切換渲染內容，對於有些程序來講，好比後臺具備權限管理的系統來講，有些組件只對某些權限的用戶開放。沒有權限的用戶想要導航到這個組件的路由，是不被許可的。這就是守衛導航。

二、跳轉和取消的方式。

有些路由通過導航守衛程序過濾以後，不能被渲染，那就須要告訴程序下一步的流程。

取消路由導航是通常的作法。跳轉則是比較特殊的作法。

全局守衛 

const router = new Router({ routes: [{
  path: '/',
  name: 'home',
  component: Home
}, {
  path: '/form',
  name: 'forms',
  component: Forms
}, {
  path: '/about/:id',
  name: 'about',
  // 路由級別的代碼分離 (懶加載組件)
  // 下列代碼會生成一個 (about.[hash].js) 分離代碼包
  // 並在當前路由激活時才加載該組件
  component: () => import('./views/About.vue'),
  children: [{
    path: '1',
    component: HelloWorld,
    props: (router) => ({ msg: router.query.msg })
  }]
}] })

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

全局路由導航守衛 ( 上述紅色部分 )，to 和 from 都是路由實例。

next() 必須調用，沒有這個 next() 有什麼後果註釋掉便一清二楚 ( 整個 vue 應用宕機 )。

next(false) 中斷當前的導航

next('/') 跳轉到一個不一樣的地址

next(error) 導航會被終止且該錯誤會被傳遞給 router.onError() 註冊過的回調。

還有 router.beforeResolve 與 router.beforeEach 相似。

局部守衛

  path: '/',
  name: 'home',
  component: Home,
  beforeEnter: (to, from, next) => {
    console.log('路由-前置-鉤子')
    next()
  }

參數和功能與全局的同樣。

組件內守衛

  beforeRouteEnter (to,from,next) {
    console.log('組件-前置-鉤子')
    next()
  },
  beforeRouteUpdate (to,from,next) {
    console.log('組件-複用-鉤子')
    next()
  },
  beforeRouteLeave (to,from,next) {
    console.log('組件-離開-鉤子')
    next()
  }

完整的導航解析流程

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

==========================

路由還有 路由元信息 過渡動效 數據獲取 滾動行爲 路由懶加載 等內容，因爲並不複雜，官方教程講等很詳細，在此便再也不介紹。

關於路由初級學習便到此爲止。

到目前位置已經學會 路由和組件，實際上已經能夠寫出來不太複雜的 vue 應用，好比博客，數據庫管理系統等。

到後面我就來寫一個數據庫管理系統 ( 其中涉及後臺 koa2 的應用，請自行學習 )。