Vue Router 設定 - daniel-qa/Vue GitHub Wiki

• 1 觸發導航

 router.push({ name: 'personalSyllabus' })`

• 2 進入全域 beforeEach

  先跑權限插件守衛：beforeEach.bind(router)（依 meta.middleware 做登入/角色/權限判斷）

  再跑你自訂守衛：此路徑通常直接 next() 放行

• 3 路由匹配 ( 通常是 route.js )

  命中父路由 /home（Layout：@/view/Home）

  命中子路由 personalSyllabus（URL：/home/personalSyllabus）

• 4 懶載入元件

  import('@/view/syllabus/Syllabus.vue') → 第一次會下載對應 chunk

• 5 渲染

  在 Home 的 <router-view> 渲染 Syllabus.vue

• 6 進入 afterEach

  跑插件 afterEach.bind(router) 做收尾（紀錄/狀態更新等）