Vue导航守卫怎么使用

发布时间:2023-04-11 15:24:28 作者:iii
来源:亿速云 阅读:95

这篇文章主要介绍“Vue导航守卫怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue导航守卫怎么使用”文章能帮助大家解决问题。

守卫参数

注意:可以向任意给定的导航守卫传递next,但是next的使用过程容易出错,需要确保next在任何给定的导航守卫中都被严格调用一次。(可以出现多于一次,但是只能在所有逻辑路径都不重叠的情况,否则钩子永远不会被解析或者报错)

守卫返回值

全局守卫

全局前置守卫

const router = createRouter({...})
router.beforeEach((to, from) => {
})

全局解析守卫

router.beforeResolve(async to => {
})

全局后置钩子

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

单个路由独享守卫

const routes = [{
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
    },
    // beforeEnter: [removeQuery, removeHash]
}]

组件级守卫

注意:beforeRouteEnter 是支持给 next 传递回调的唯一守卫

beforeRouteEnter(to, from, next) {
    next(vm => {
        // 通过'vm'访问组件实例
    })
}

离开守卫:通常用来预防用户在还未保存修改前突然离开,可以通过返回false来取消

完整的导航解析流程

  1. 导航被触发

  2. 在离开的组件里调用 beforeRouteLeave 守卫

  3. 调用全局的 beforeEach 守卫

  4. (如果是重用组件)调用 beforeRouteUpdate 守卫

  5. 在路由配置里调用 beforeEnter

  6. 解析异步路由组件

  7. 在被激活的组件里调用 beforeRouteEnter

  8. 调用全局的 beforeResolve 守卫

  9. 导航被确认

  10. 调用全局的 afterEach 钩子

  11. 触发 DOM 更新

  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入

关于“Vue导航守卫怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

推荐阅读:
  1. VUE父组件向子组件传递数据
  2. vue实现登录验证的代码

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:python使用cv2库和下载opencv库的方法是什么

下一篇:Java单个TCP连接发送多个文件的问题怎么解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》