位置: 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优化小目标识别

  • 怎样用视频网络推广呢(怎样用视频网络直播)

    怎样用视频网络推广呢(怎样用视频网络直播)

  • adobe flash是什么(adobeflash是什么软件可以删除吗?)

    adobe flash是什么(adobeflash是什么软件可以删除吗?)

  • iqoou1是什么处理器呢(iqoou1是5g吗)

    iqoou1是什么处理器呢(iqoou1是5g吗)

  • 抖音自己播提成多少(2021年抖音自己播提成多少)

    抖音自己播提成多少(2021年抖音自己播提成多少)

  • 操作系统负责管理计算机的(操作系统负责管理所有)

    操作系统负责管理计算机的(操作系统负责管理所有)

  • xp系统宽带连接错误769(xp系统宽带连接不了)

    xp系统宽带连接错误769(xp系统宽带连接不了)

  • 三星s9开不了机怎么办(三星s9开不了机了)

    三星s9开不了机怎么办(三星s9开不了机了)

  • 苹果xr双卡只能显示1张卡(苹果xr放2张卡怎么只能用一张)

    苹果xr双卡只能显示1张卡(苹果xr放2张卡怎么只能用一张)

  • 小米8能遥控空调吗(小米8遥控空调没有红外)

    小米8能遥控空调吗(小米8遥控空调没有红外)

  • wi-fi网络差是因为什么原因(wifi很差是什么原因)

    wi-fi网络差是因为什么原因(wifi很差是什么原因)

  • 手机背光坏了要换屏吗(手机背光坏了要换吗)

    手机背光坏了要换屏吗(手机背光坏了要换吗)

  • 微信聊天记录占手机内存吗(微信聊天记录占空间吗)

    微信聊天记录占手机内存吗(微信聊天记录占空间吗)

  • 苹果完美解锁机是什么意思(苹果完美解锁机能买吗)

    苹果完美解锁机是什么意思(苹果完美解锁机能买吗)

  • 宽带路由器和无线路由器一样吗(宽带路由器无法访问互联网)

    宽带路由器和无线路由器一样吗(宽带路由器无法访问互联网)

  • word文档段落底纹怎么设置(word文档段落底纹颜色设置)

    word文档段落底纹怎么设置(word文档段落底纹颜色设置)

  • 手机没停机4g连不上网(手机没停机但是连不上数据怎么了)

    手机没停机4g连不上网(手机没停机但是连不上数据怎么了)

  • microsoft visio是什么软件(office中visio是什么)

    microsoft visio是什么软件(office中visio是什么)

  • 苹果6s无服务是怎么回事(苹果6s无服务是什么意思)

    苹果6s无服务是怎么回事(苹果6s无服务是什么意思)

  • 荣耀9x前摄像头歪怎么解决(荣耀9X前摄像头能升起,拍照没反应)

    荣耀9x前摄像头歪怎么解决(荣耀9X前摄像头能升起,拍照没反应)

  • 冯诺依曼计算机的五大部件(冯诺依曼计算机体系结构)

    冯诺依曼计算机的五大部件(冯诺依曼计算机体系结构)

  • 华为折叠matex上市时间

    华为折叠matex上市时间

  • 手机存储空间不足怎么清理(手机存储空间不足怎么扩大)

    手机存储空间不足怎么清理(手机存储空间不足怎么扩大)

  • 服务器与主机的区别(服务器主机的主板能拆下来吗)

    服务器与主机的区别(服务器主机的主板能拆下来吗)

  • 华为linux和windows的区别(华为笔记本linux和windows的区别)

    华为linux和windows的区别(华为笔记本linux和windows的区别)

  • 索尼xperia1怎么剪辑铃声

    索尼xperia1怎么剪辑铃声

  • 华为荣耀20发布时间(华为荣耀系列)

    华为荣耀20发布时间(华为荣耀系列)

  • Vue 解决报错 You are using the runtime-only build of Vue where the template compiler is not available.(vue错误提示)

    Vue 解决报错 You are using the runtime-only build of Vue where the template compiler is not available.(vue错误提示)

  • WordPress修改functions.php教程(wordpress修改数据库)

    WordPress修改functions.php教程(wordpress修改数据库)

  • 计提递延所得税资产
  • 每个月发工资扣个税扣的肉疼
  • 所得税汇算清缴后发现有误怎么办
  • 合伙企业每年费用
  • 继续教育专项扣除金额
  • 员工补偿金是按上十二个月的平均工资
  • 实收资本如何网上转账
  • 房地产企业土地使用权入什么科目
  • 企业所得税季报资产总额怎么填
  • 外贸业务收境外人民币
  • 融资租入固定资产
  • 金融机构往来利息支出
  • 研发部门属于哪个会计科目
  • 兼职劳务费如何入账
  • 过路费去年的票还可以用吗
  • 小规模代开增值税专票开错了如何处理?
  • 股东投资款印花税多少
  • 高温气温
  • 普通的增值税发票可以查询到购买人的信息吗
  • 存货跌价准备如何结转
  • 员工的水电费计入什么科目
  • 电子商务出来干嘛
  • 苹果手机miracast在哪里找到
  • 公司处理陈旧物怎么处理
  • 银行承兑汇票付款提示期限
  • 小规模开票运费怎么开
  • 如何在电脑管家下载软件
  • php7.3
  • 你知道约定的公司有哪些
  • 固定资产减值判断标准
  • 投标保证金退回的利息计入什么费用
  • 公司股东退股如何审计的
  • 资产减值损失的科目编码
  • 企业受赠业务的法律规定
  • vant移动端开发
  • 怎么更改win7
  • 国产设备投资抵免企业所得税
  • php session_start
  • axios提交文件
  • php环境搭建apache
  • 【Vue】踩坑日记:Scoped下动画无效,曾经以为百利而无一害的Scoped,也有自己的限制
  • opencv模板匹配多目标旋转
  • 强化学习之stable_baseline3详细说明和各项功能的使用
  • php中的数据类型有哪些?
  • phpcms是什么框架
  • python如何导入excel
  • 购买原材料的运输费计入什么科目
  • 个体工商户可以开对公账户吗
  • 增值税发票货物名称要求
  • 投资性房地产如何折旧
  • 三方协议代付的钱在哪里
  • 企业营改增税率是多少
  • 加计扣除所得税怎么算
  • 城镇土地使用税减免税政策
  • 贴现凭证如何做账务处理
  • 个人给国外公司提供服务
  • 财政非税收入支付平台
  • 帮别人注册医疗器械法人有风险吗
  • 公司的固定资产怎么处理
  • 新办企业在建期间账务处理
  • 其他应收款贷方余额怎么调整
  • 转出未交增值税会计处理
  • 其他应收款待抵扣税金
  • 暂估的费用次年调增怎么做会计分录
  • 数据库中多表连接的方式
  • windows不能打开此文件result:31
  • macos time machine
  • mac 查看当前用户
  • 如何把itunes的音乐导入ipod
  • ie10变成ie8
  • toolkit:eclipse导入下载好的android系统源码
  • linux sed awk区别
  • js中改变css文件中的样式
  • jquery右击事件
  • javascript面向对象精要pdf
  • 简约时尚搭配
  • 如何查政审合不合格
  • 河北税务官网电子税务局
  • uk在哪里看开票截止日期
  • 卖钢材交哪些税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设