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

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

盡量把紛繁的知識，肢解重組成為可以堆砌的知識。

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

我的 github 地址 - vue3.0Study - 階段學習成果都會建立分支。

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

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

導航守衛

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

官網的定義的理解：

1、守衛導航是什么意思？

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

2、跳轉和取消的方式。

有些路由經過導航守衛程序過濾之后，不能被渲染，那就需要告訴程序下一步的流程。

取消路由導航是一般的做法。跳轉則是比較特殊的做法。

全局守衛 

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 的應用，請自行學習 )。