Vue入門（七）—— 導航守衛

舉個簡單的例子，用代碼說明

const router = new VueRouter({
  routes
})

// 導航守衛 start
// 掛載導航守衛
router.beforeEach(
  (to, from, next) => {
    // to 將要訪問的路徑
    // from 從哪個路徑跳轉而來
    // next 是一個函數，表示放行，有兩個用法：1.next()表示放行 2.next('/login')表示強制跳轉login路由

    // 如果是登錄頁，直接放行
    if (to.path === '/login') return next()
    // 如果不是登錄頁
    const tokenStr = window.sessionStorage.getItem('token')
    // token不存在，轉跳登錄頁
    if (!tokenStr) return next('/login')
    // token存在，放行
    next()
  }
)
// 導航守衛 end

export default router