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