iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

別再說我不會框架,網頁 Vue 起來!系列 第 27

路由把關者- Navigation Guards

前言

Vue Router 提供 Navigation Guards,可以在路由變更前後去呼叫相關的 function。


使用?

利用router.beforeEach 註冊全域 before guards

const router = new VueRouter({ ... })

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

to: 即將要進入的路由
from: 從何處離開到這的路由
next: 往下執行的 callback

在路由跳轉結束後觸發afterEach (不會影響路由跳轉)

router.afterEach((to, from) => {
  // ...
})

在 route 物件內註冊,可依照規則決定是否要註冊 hook

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

在元件中...

單一元件中也有 Hooks 可以用

  • beforeRouteEnter
    • 路由尚未進入元件時
  • beforeRouteUpdate
    • 當路由被改變,但元件還是同一個時
  • beforeRouteLeave
    • 當路由要離開這個元件時

ex:

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 還無法取得 this
  },
  beforeRouteUpdate(to, from, next) {
    // called when the route that renders this component has changed.
    // This component being reused (by using an explicit `key`) in the new route or not doesn't change anything.
    // 例如 `/foo/1` and `/foo/2`, 都是用到 foo 這個實體
  },
  beforeRouteLeave(to, from, next) {
    // 離開當下
  }
}

順序

Navigation lifecycle diagram

取自[Docs] Incomplete Navigation Resolution Flow

start beforeRouteLeave 離開路由(元件)
----> beforeEach 進入新的路由前(全域)
----> beforeEnter 進入新的路由前
----> beforeRouteEnter 路由尚未進入元件時
----> beforeResolve 路由和搭配元件已被解析
----> afterEach 路由跳轉完
----> beforeCreate 元件建立前
----> created 元件已建立
----> beforeMount 掛載前
----> mounted 掛載完成


下篇預告

  • Composition API
  • Navigation Guards 實例 這個下下回

每日一句:
對自己加油,還有 3 天 /images/emoticon/emoticon02.gif


上一篇
[番外] 一步一步實現購物車功能 [續]
下一篇
擁抱組合疊疊樂 Composition API [序]
系列文
別再說我不會框架,網頁 Vue 起來!30

尚未有邦友留言

立即登入留言