最简单的vue路由导航守卫

一、基本定义（由AI生成）

1.全局路由守卫

全局路由守卫应用于整个路由系统，无论路由如何变化，都会触发这些守卫。全局守卫通常用于统一的权限验证、日志记录等操作。

全局前置守卫（beforeEach）在路由跳转前执行。

router.beforeEach((to, from, next) => {
  console.log('即将进入路由:', to.path)
  console.log('当前路由:', from.path)
  next() // 必须调用 next() 才能继续路由跳转
})

全局解析守卫（beforeResolve）在所有组件内守卫和异步路由组件被解析之后执行。

router.beforeResolve((to, from, next) => {
  console.log('所有组件解析完成，准备跳转:', to.path)
  next()
})

全局后置守卫（afterEach）在路由跳转后执行，无法阻止路由跳转。

router.afterEach((to, from) => {
  console.log('已跳转到路由:', to.path)
})

2. 组件内路由守卫

组件内路由守卫是定义在特定组件内部的路由守卫，用于控制在该组件的进入、更新和离开时的行为。

组件内前置守卫（beforeRouteEnter)在进入组件前执行，此时组件实例尚未创建，无法访问 this。

beforeRouteEnter(to, from, next) {
  console.log('即将进入组件:', to.path)
  next(vm => {
    // 可以通过 vm 访问组件实例
  })
}

组件内更新守卫（beforeRouteUpdate）在当前路由改变但组件被复用时执行，可以访问 this。

beforeRouteUpdate(to, from, next) {
  console.log('路由更新，组件被复用:', to.path)
  this.fetchData(to.params.id) // 示例：重新获取数据
  next()
}

组件内离开守卫（beforeRouteLeave）在离开组件前执行，可以访问 this。

beforeRouteLeave(to, from, next) {
  const isSaved = this.isSaved // 示例：检查数据是否保存
  if (isSaved) {
    next()
  } else {
    const confirm = window.confirm('未保存的更改，确定离开吗？')
    if (confirm) {
      next()
    } else {
      next(false)
    }
  }
}

3. 路由独享守卫

路由独享守卫是针对某个特定路由配置的守卫，仅在该路由被访问时触发。

路由独享前置守卫（beforeEnter）在进入特定路由前执行，适合针对特定路由进行权限控制或数据预处理。

const routes = [
  {
    path: '/user/:id',
    component: User,
    beforeEnter: (to, from, next) => {
      console.log('即将进入用户详情页:', to.params.id)
      const isAdmin = /* 判断是否为管理员 */
      if (isAdmin) {
        next()
      } else {
        next('/403') // 重定向到无权限页面
      }
    }
  }
]

二、简单实现页面之间的跳转路由守卫

1.首先创建三个界面（首页，关于，登录）

2、设置最简单的路由守卫

从首页跳转到关于

三、实现最简单的登录路由守卫

如果要跳转到其它页面，必须先登录

1.我们设置vuex状态管理，设置是否登录状态（isLogin）

可以阅读作者文章：最简单的vue状态管理vuex示例

2.设置登录逻辑

3.完善vuex状态管理

4.设置登录路由守卫

5.展示效果

当点击别的页面时，跳转到login页面

当登录时，才能进入其它页面

四、源代码

源代码：https://gitee.com/zyGitee983/learning-notes.git