vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)

简介: vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)



一、什么是Vue路由导航守卫?

Vue路由导航守卫是Vue Router提供的一种机制,它可以让你在路由跳转之前或之后执行一些自定义逻辑,例如:鉴权、重定向等。守卫分为全局守卫、路由独享守卫和组件内守卫。

二、全局守卫

全局守卫作用于所有路由,包括进入路由、离开路由、进入子路由和离开子路由。全局守卫有三个:beforeEach、beforeResolve和afterEach。

1、beforeEach

beforeEach在路由跳转之前被调用,它接收三个参数:to、from和next。

to:即将进入的路由对象;from:当前导航正要离开的路由对象;next:函数,必须调用next()来resolve钩子。

下面是一个beforeEach的示例代码:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !user.isLoggedIn) { // 鉴权
    next({
      path: '/login', // 重定向到登录页
      query: {redirect: to.fullPath} // 保存跳转路径
    })
  } else {
    next() // 继续跳转
  }
})

上面的代码中,我们使用了to.meta.requiresAuth来判断该路由是否需要鉴权,如果需要鉴权且用户没有登录,则将用户重定向到登录页,并通过query参数记录下用户原本想要跳转的路径。

2、beforeResolve

beforeResolve是在导航被确认之前被调用,它接收一个参数:to。

to:即将进入的目标路由对象。

下面是一个beforeResolve的示例代码:

router.beforeResolve((to) => {
  console.log('正在进入', to.name || to.path)
})

上面的代码中,我们使用了to.name || to.path来获取路由的名称或路径,并在控制台输出正在进入的路由名称或路径。

3、afterEach

afterEach在路由跳转之后被调用,它接收两个参数:to和from。

to:即将进入的路由对象;from:当前导航正要离开的路由对象。

下面是一个afterEach的示例代码:

router.afterEach((to, from) => {
  console.log('从', from.name || from.path, '跳转到', to.name || to.path)
})

上面的代码中,我们使用了from.name || from.path和to.name || to.path来获取路由的名称或路径,并在控制台输出从哪个路由跳转到哪个路由了。

三、路由独享守卫

路由独享守卫作用于单个路由,它们在路由配置中定义。路由独享守卫有两个:beforeEnter和afterEnter。

1、beforeEnter

beforeEnter在路由切换前被调用,它接收三个参数:to、from和next。

to:即将进入的路由对象;from:当前导航正要离开的路由对象;next:函数,必须调用next()来resolve钩子。

下面是一个beforeEnter的示例代码:

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    beforeEnter: (to, from, next) => {
      if (user.isAdmin) { // 鉴权
        next() // 继续跳转
      } else {
        next('/forbidden') // 跳转到禁止访问页
      }
    }
  }
]

上面的代码中,我们使用了user.isAdmin来判断用户是否是管理员,如果是管理员则可以访问/dashboard路由,否则跳转到/forbidden路由。

2、afterEnter

afterEnter在路由切换后被调用,它接收一个参数:to。

to:即将进入的目标路由对象。

下面是一个afterEnter的示例代码:

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    afterEnter: (to) => {
      console.log(to.name || to.path, '已进入')
    }
  }
]

上面的代码中,我们使用了to.name || to.path来获取路由的名称或路径,并在控制台输出已进入该路由。

四、组件内守卫

组件内守卫作用于单个组件,它们与全局守卫和路由独享守卫不同的是,它们不需要在路由配置中定义,而是在组件内定义。

1、beforeRouteEnter

beforeRouteEnter在路由进入组件前被调用,它接收三个参数:to、from和next。

to:即将进入的路由对象;from:当前导航正要离开的路由对象;next:函数,必须调用next()来resolve钩子。

下面是一个beforeRouteEnter的示例代码:

export default {
  beforeRouteEnter(to, from, next) {
    if (user.hasPermission) { // 鉴权
      next() // 继续进入该组件
    } else {
      next(false) // 禁止进入该组件
    }
  }
}

上面的代码中,我们使用了user.hasPermission来判断用户是否有权限进入该组件,如果有权限则进入该组件,否则禁止进入该组件。

2、beforeRouteUpdate

beforeRouteUpdate在路由进入组件后,组件复用时被调用,它接收两个参数:to和from。

to:即将进入的路由对象;from:当前导航正要离开的路由对象。

下面是一个beforeRouteUpdate的示例代码:

export default {
  beforeRouteUpdate(to, from) {
    console.log('从', from.name || from.path, '到', to.name || to.path)
  }
}

上面的代码中,我们使用了from.name || from.path和to.name || to.path来获取路由的名称或路径,并在控制台输出从哪个路由跳转到哪个路由了。

3、beforeRouteLeave

beforeRouteLeave在路由离开组件时被调用,它接收两个参数:to和from和next。

to:即将进入的路由对象;from:当前导航正要离开的路由对象;next:函数,必须调用next()来resolve钩子。

下面是一个beforeRouteLeave的示例代码:

export default {
  beforeRouteLeave(to, from, next) {
    if (shouldLeave) { // 确认是否离开
      next() // 继续离开
    } else {
      next(false) // 禁止离开
    }
  }
}

上面的代码中,我们使用了shouldLeave来判断用户是否要离开该组件,如果要离开则继续离开,否则禁止离开。

五、总结

Vue路由导航守卫是Vue Router提供的一种机制,可以让你在路由跳转之前或之后执行一些自定义逻辑,例如:鉴权、重定向等。守卫分为全局守卫、路由独享守卫和组件内守卫,每种守卫都有自己的使用场景。在使用守卫时,需要注意它们的执行顺序和next函数的使用,避免出现无限循环的情况。

相关文章
|
2天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
2天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
145 1
|
6天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
54 12
|
2天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
23天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
51 8
|
24天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
64 1
|
3月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
108 58
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
3月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
66 1
vue学习第一章

热门文章

最新文章