路由导航守卫

最新推荐文章于 2024-01-12 15:28:41 发布

卖火柴的清酒

最新推荐文章于 2024-01-12 15:28:41 发布

阅读量390

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/tel15387005147/article/details/122244247

版权

本文详细介绍了Vue.js中的路由导航守卫，包括全局前置守卫`router.beforeEach`、全局后置钩子`router.afterEach`、全局解析守卫`router.beforeResolve`、路由独享守卫和组件内的守卫。讲解了每个守卫的使用方法及其在导航解析流程中的位置。

摘要由CSDN通过智能技术生成

路由导航守卫

router.beforeEach

router.afterEach

router.beforeResolve

beforeEnter

beforeRouteEnter

beforeRouteUpdate (2.2 新增)

beforeRouteLeave

1.全局前置守卫----router.beforeEach

router.beforeEach 注册一个全局前置守卫：

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

router.beforeEach((to, from, next) => {
  //  to:要去哪个页面
  //  from:从哪里来
  //  next:它是一个函数。
  //     如果直接放行 next()
  //     如果要跳到其它页 next(其它页)
})

示例代码：

router.beforeEach(async(to, from, next) => {
  NProgress.start() // 开启进度条
  const token = store.state.user.token
  const userId = store.state.user.userInfo.userId
  console.log(token, to.path, from.path)
  if (token) {
    if (to.path === '/login') { // 有 token还要去login
      next('/')
      NProgress.done() // 关闭进度条
    } else { // 有 token，去其他页面，放行
      if (!userId) {