Vue全局守卫和路由独享守卫(导航守卫篇)

举报
前端老实人 发表于 2022/01/17 09:18:23 2022/01/17
【摘要】 VueRouter_导航守卫导航:路由正在发生变化。导航守卫主要用来通过跳转或取消的方式守卫导航。导航守卫被分成三种:全局的、单个路由独享的、组件内的。 全局守卫是指路由实例上直接操作的钩子函数,触发路由就会触发这些钩子函数。vue-router全局有三个守卫router.beforeEach :全局前置守卫,进入路由之前router.beforeResolve :全局解析守卫,在befo...

VueRouter_导航守卫

导航:路由正在发生变化。

导航守卫主要用来通过跳转或取消的方式守卫导航。

导航守卫被分成三种:全局的、单个路由独享的、组件内的。

全局守卫

是指路由实例上直接操作的钩子函数,触发路由就会触发这些钩子函数。

vue-router全局有三个守卫

  • router.beforeEach :全局前置守卫,进入路由之前
  • router.beforeResolve :全局解析守卫,在beforeRouteEnter调用之后调用(不常用)
  • router.afterEach :全局后置钩子,进入路由之后

全局前置守卫 beforeEach

在路由跳转前触发,一般被用于登录验证。

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

router.beforeEach((to, from, next) => {
   // ... 
})

参数说明:

  • to 目标路由对象

  • from 即将要离开的路由对象

  • next 三个参数中最重要的参数。

    • 必须调用next(),才能继续往下执行一个钩子,否则路由跳转会停止
    • 若要中断当前的导航,可以调用next(false)。
    • 可以使用next跳转到一个不同的地址。终端当前导航,进入一个新的导航。next参数值和$routet.push一致。
    • next(error)。2.4+,如果传入的参数是一个Error实例,则导航会被终止,且该错误会被传递给router.onError() 注册过的回调。

全局解析守卫 beforeResolve

和boforeEach类似,路由跳转前触发。

和beforeEach的区别:在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。

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

router.beforeResolve((to, from, next) => {
   // ... 
})

全局后置钩子 afterEach

和beforeEach相反,路由跳转完成后触发。

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

router.afterEach((to, from) => {
   // ... 
})

路由独享守卫

是指在单个路由配置的时候也可以设置的钩子函数。

beforeEnter

和beforeEach完全相同,如果都设置则在beforeEach之后紧随执行。

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      beforeEnter: (to, from, next) => {
         // ... 
      }
    }
  ]
})

最后

如果对您有帮助,希望能给个👍评论/收藏/三连!

博主为人老实,无偿解答问题哦❤

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。