位置: IT常识 - 正文

走进Vue【四】导航守卫和路由原信息详解(vue导航解析流程)

编辑:rootadmin
走进Vue【四】导航守卫和路由原信息详解 文章目录🌟前言🌟什么是导航守卫?🌟全局前置守卫🌟全局解析守卫🌟全局后置钩子🌟路由独享的守卫🌟组件内的守卫可用的配置 API使用组合 API🌟完整的导航解析流程🌟路由元信息🌟写在最后🌟JSON包里写函数,关注博主不迷路🌟前言

推荐整理分享走进Vue【四】导航守卫和路由原信息详解(vue导航解析流程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue教学视频教程,vue导航解析流程,vue导入功能,vue导航实现,vue实现导入导出,导入vue.js,vue实现导入导出,vue ui导入项目,内容如对您有帮助,希望把文章链接给更多的朋友!

哈喽小伙伴们,上一期给大家总结了一下vue-router的基础知识和用法,也带着大家做了一些小案例;不知道小伙伴们联系的怎么样呢?私下也收到了好多小伙伴的私信和评论,,和大家一起共同学习进步真的很开心。今天博主继续咱们之前的走进Vue,来说一下vue-router当中的导航守卫的一些知识;一起来看下吧。

🌟什么是导航守卫?

“导航”表示路由正在发生改变。

正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的,或者组件级的。 记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用beforeRouteUpdate 的组件内守卫。

vue-router官方文档(Vue3写法)

🌟全局前置守卫

你可以使用 router.beforeEach 注册一个全局前置守卫:

const router = createRouter({ ... })router.beforeEach((to, from) => { // ... // 返回 false 以取消导航 return false})

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。

走进Vue【四】导航守卫和路由原信息详解(vue导航解析流程)

每个守卫方法接收三个参数:

to: Route: 即将要进入的目标 路由对象from: Route: 当前导航正要离开的路由next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到from路由对应的地址。next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的to prop 或 router.push 中的选项。next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错。这里有一个在用户未能验证身份时重定向到/login 的示例:

router.beforeEach(async (to, from) => { if ( // 检查用户是否已登录 !isAuthenticated && // ❗️ 避免无限重定向 to.name !== 'Login' ) { // 将用户重定向到登录页面 return { name: 'Login' } } })

如果遇到了意料之外的情况,可能会抛出一个 Error。这会取消导航并且调用 router.onError() 注册过的回调。 如果什么都没有,undefined 或返回 true,则导航是有效的,并调用下一个导航守卫 以上所有都同 async 函数 和 Promise 工作方式一样:

router.beforeEach(async (to, from) => { // canUserAccess() 返回 `true` 或 `false` const canAccess = await canUserAccess(to) if (!canAccess) return '/login'})

可选的第三个参数 next

在之前的 Vue Router 版本中,也是可以使用 第三个参数 next 的。这是一个常见的错误来源,可以通过 RFC 来消除错误。然而,它仍然是被支持的,这意味着你可以向任何导航守卫传递第三个参数。在这种情况下,确保 next 在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错。这里有一个在用户未能验证身份时重定向到/login的错误用例:

// BADrouter.beforeEach((to, from, next) => { if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) // 如果用户未能验证身份,则 `next` 会被调用两次 next()})

下面是正确的版本:

// GOODrouter.beforeEach((to, from, next) => { if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) else next()})🌟全局解析守卫

你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,因为它在 每次导航时都会触发,但是确保在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被正确调用。这里有一个例子,确保用户可以访问自定义 meta 属性 requiresCamera 的路由:

router.beforeResolve(async to => { if (to.meta.requiresCamera) { try { await askForCameraPermission() } catch (error) { if (error instanceof NotAllowedError) { // ... 处理错误,然后取消导航 return false } else { // 意料之外的错误,取消导航并把错误传给全局处理器 throw error } } }})

router.beforeResolve 是获取数据或执行任何其他操作(如果用户无法进入页面时你希望避免执行的操作)的理想位置。

🌟全局后置钩子

你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身:

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

它们对于分析、更改页面标题、

本文链接地址:https://www.jiuchutong.com/zhishi/299541.html 转载请保留说明!

上一篇:五、CNN-LSTM数据驱动模型(cnn数据集)

下一篇:[深度学习] 基于切片辅助超推理库SAHI优化小目标识别

  • 快手不能看别人的关注和粉丝吗(快手不能看别人直播怎么回事)

    快手不能看别人的关注和粉丝吗(快手不能看别人直播怎么回事)

  • 苹果13设置主屏时间和日期(苹果13设置主屏幕布局5X5)

    苹果13设置主屏时间和日期(苹果13设置主屏幕布局5X5)

  • 华为p40可以用NFC功能吗(华为P40可以用NFC功能吗?)

    华为p40可以用NFC功能吗(华为P40可以用NFC功能吗?)

  • 华为手机检测不到新版本(华为手机检测不到蓝牙耳机怎么办)

    华为手机检测不到新版本(华为手机检测不到蓝牙耳机怎么办)

  • qq群文件怎么设置永久(qq群文件怎么设置只能群主上传)

    qq群文件怎么设置永久(qq群文件怎么设置只能群主上传)

  • 苹果手机不能用万能钥匙吗(苹果手机不能用wifi的原因)

    苹果手机不能用万能钥匙吗(苹果手机不能用wifi的原因)

  • 微信图片模糊怎么变清晰(微信图片模糊怎么弄清晰)

    微信图片模糊怎么变清晰(微信图片模糊怎么弄清晰)

  • c盘被压缩无法开机(c盘被压缩无法解压)

    c盘被压缩无法开机(c盘被压缩无法解压)

  • 小米手机发热(小米手机发热严重吗)

    小米手机发热(小米手机发热严重吗)

  • 华为的屏幕录制在哪里设置(华为的屏幕录制为什么自己没有声)

    华为的屏幕录制在哪里设置(华为的屏幕录制为什么自己没有声)

  • 抖音怎么只让一个好友看(抖音怎么只让一个手机登录)

    抖音怎么只让一个好友看(抖音怎么只让一个手机登录)

  • ps软件没有网络可以用吗(ps软件没有网络怎么办)

    ps软件没有网络可以用吗(ps软件没有网络怎么办)

  • 怎么在浏览器上发帖子(怎么在浏览器上发布自己的广告)

    怎么在浏览器上发帖子(怎么在浏览器上发布自己的广告)

  • vivo手机录屏怎么开启(vivo手机录屏怎么没有声音)

    vivo手机录屏怎么开启(vivo手机录屏怎么没有声音)

  • 苹果xs有没有耳机孔(苹果手机xs有耳机孔吗)

    苹果xs有没有耳机孔(苹果手机xs有耳机孔吗)

  • 手机卡剩话费不用了怎么办(手机话费用不完)

    手机卡剩话费不用了怎么办(手机话费用不完)

  • 系统处于通话状态怎么解决(系统处于通话状态怎么取消)

    系统处于通话状态怎么解决(系统处于通话状态怎么取消)

  • 探探暗恋成功怎么取消(探探暗恋成功会发短信吗)

    探探暗恋成功怎么取消(探探暗恋成功会发短信吗)

  • 安卓手机怎么打印照片(安卓手机怎么打开定位)

    安卓手机怎么打印照片(安卓手机怎么打开定位)

  • 账期保障15天怎么取消(账期保障15天什么意思)

    账期保障15天怎么取消(账期保障15天什么意思)

  • 转转卖出的东西怎么重新上架(转转卖出的东西的钱什么时候到账)

    转转卖出的东西怎么重新上架(转转卖出的东西的钱什么时候到账)

  • 电脑电缆线是哪根(电脑电缆线是哪一根)

    电脑电缆线是哪根(电脑电缆线是哪一根)

  • p30 支持5g吗(p30 支持5G吗)

    p30 支持5g吗(p30 支持5G吗)

  • iphone6s掉水里怎么办?iphone6s掉入水中的处理方法(iphone6s掉水里怎么办)

    iphone6s掉水里怎么办?iphone6s掉入水中的处理方法(iphone6s掉水里怎么办)

  • 异地预缴可以退吗
  • 印花税购买使用要求及印花税会计分录?
  • 税务检查是什么行政行为
  • 坏账准备怎么做T型账户
  • 农民工专户个税起征点2023四川省
  • 百旺税控盘自己用不了
  • 网银发工资怎么增员的
  • 人工费怎么入账
  • 环境保护税属于什么税种
  • 职工教育经费怎么花
  • 个人独资企业经营所得税优惠政策
  • 税控盘丢失需要罚款吗
  • 纳税人取得虚开的增值税专用发票处理问题的通知
  • 银行承兑汇票背书转让后怎么查询
  • 房屋租赁需要交增值税吗
  • 如何简单区分坏人和坏人
  • 当月计提的增值税是什么
  • 企业所得税优惠事项包括哪些?
  • 旅游服务机票款普通发票可以抵扣吗
  • 外币汇兑差额债券投资计入什么科目?
  • 购货方收到代垫运费的发票怎么做会计分录?
  • 背书转让后的电子承兑怎么打印
  • 小企业财务报表不包括
  • 合同增值税如何申报
  • 收到小额支付转账什么意思
  • 想买黄金投资怎么做
  • 我们无法创建新的分区,也找不到现有的分区 贴吧
  • won10字体变大
  • 国有企业上缴利润的账务处理怎么处理?
  • 支付宝流量红包怎么取消
  • macos快捷键一览
  • 怎么调整去年的业务招待费的比例
  • 落枕怎么办怎么治疗
  • 用php写个简单的编程
  • nvidia显卡驱动怎么安装
  • 无偿转让房屋
  • 我的年终总结怎么写
  • 前端底层架构是什么意思
  • php如何安装配置
  • 商业银行贷款业务按担保形式分,可分为( )
  • 科技型中小微企业贷款贴息贴保项目入库
  • 增值税专用发票查询系统官方网站
  • 电子承兑对方拒绝签收多久能到账
  • 哪些免征土地使用税
  • 实行自行申报的项目有哪些
  • 应收账款未收到是否要交税
  • 发票已到材料未到会计分录
  • 冲暂估费用
  • 房产税税率采用比例税率按照房产余值计征的年税率为
  • 出售子公司股权合并报表的会计处理
  • 企业过桥贷款违法吗
  • 企业亏损净资产降低吗
  • 往来账目
  • 退回的保证金多了一点怎么做分录
  • 收到水电费发票要交印花税吗
  • 出口退税的会计分录为什么在贷方
  • 赠送商品需要开发票吗
  • 进口货物的价格组成有哪些
  • 专项应付款贷方余额表示
  • 企业给员工租的公寓
  • 购入固定资产怎么折旧
  • 日记账的建账工作
  • mysql 5.7.16 zip包安装配置方法图文教程
  • mysql事务视图
  • freebsd版本选择
  • win10开机内存就占了70 解决方法
  • xp启动项设置在哪里设置
  • 进程 内核栈
  • window八
  • paytime.exe - paytime是什么进程 有什么用
  • windows10打开此电脑
  • jquery的实现原理
  • Python scikit-learn 做线性回归的示例代码
  • js字符串函数
  • node.js使用教程
  • jquery鼠标悬停显示内容
  • jquery propertychange
  • 柬埔寨现在的领导
  • 安徽国家税务局电话
  • 开增值税发票没有销售合同也要交印花税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设