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

  • 微信来电铃声怎么设置自己喜欢的音乐(微信来电铃声怎么更换)

    微信来电铃声怎么设置自己喜欢的音乐(微信来电铃声怎么更换)

  • 为什么qq空间照片删了还有显示(为什么qq空间照片显示的照片跟实际的不一样多)

    为什么qq空间照片删了还有显示(为什么qq空间照片显示的照片跟实际的不一样多)

  • 抖音铁粉怎么弄(抖音铁粉是根据什么来的)

    抖音铁粉怎么弄(抖音铁粉是根据什么来的)

  • 已启用缩放是什么意思(显示已启用缩放)

    已启用缩放是什么意思(显示已启用缩放)

  • IPA是什么(ipa是什么文件)

    IPA是什么(ipa是什么文件)

  • p30微信视频美颜怎么打开(p30微信视频美颜在哪里)

    p30微信视频美颜怎么打开(p30微信视频美颜在哪里)

  • 苹果store下载不了app怎么办(iphone store下载不了)

    苹果store下载不了app怎么办(iphone store下载不了)

  • 电脑没有麦克风可以讲话吗(蓝牙连接电脑没有麦克风)

    电脑没有麦克风可以讲话吗(蓝牙连接电脑没有麦克风)

  • 怎么做强制加进微信群(强制加微信好友的方法2020)

    怎么做强制加进微信群(强制加微信好友的方法2020)

  • 系统软件就是操作系统对不对(软件系统就是操作系统吗)

    系统软件就是操作系统对不对(软件系统就是操作系统吗)

  • 微信解封为什么显示没收到短信(微信解封为什么显示绑卡信息不一致)

    微信解封为什么显示没收到短信(微信解封为什么显示绑卡信息不一致)

  • 有光猫还需要路由器吗(有光猫的话还需要路由器吗)

    有光猫还需要路由器吗(有光猫的话还需要路由器吗)

  • iso模式什么意思(iso是什么意思)

    iso模式什么意思(iso是什么意思)

  • lldal10什么型号荣耀(lldal10华为是什么型号)

    lldal10什么型号荣耀(lldal10华为是什么型号)

  • 苹果手机不用原装充电器对手机有影响吗(苹果手机不用原装充电器会损坏电池吗)

    苹果手机不用原装充电器对手机有影响吗(苹果手机不用原装充电器会损坏电池吗)

  • 华为怎么退出盲人模式(华为怎么退出盲人模式怎么解锁屏幕)

    华为怎么退出盲人模式(华为怎么退出盲人模式怎么解锁屏幕)

  • 苹果连拍600张什么意思(iphone连拍600张照有影响吗)

    苹果连拍600张什么意思(iphone连拍600张照有影响吗)

  • 唯品会少发货了怎么办(唯品会少发货了怎么补偿)

    唯品会少发货了怎么办(唯品会少发货了怎么补偿)

  • 怎么知道对方探探卸载(怎么知道对方探探下载多久了)

    怎么知道对方探探卸载(怎么知道对方探探下载多久了)

  • app开发公司具备哪些特点(app软件开发公司)

    app开发公司具备哪些特点(app软件开发公司)

  • 如何解决Win10系统提示初始化配置资源失败?(如何解决WIN10系统文件夹只读属性不能更改)

    如何解决Win10系统提示初始化配置资源失败?(如何解决WIN10系统文件夹只读属性不能更改)

  • 解决局域网用\\计算机名不能访问,用\\ip地址可访问(局域网解决方案)

    解决局域网用\\计算机名不能访问,用\\ip地址可访问(局域网解决方案)

  • 苹果系统中怎么修改图片大小?Mac修改图片大小的图文教程(苹果系统中怎么删除软件)

    苹果系统中怎么修改图片大小?Mac修改图片大小的图文教程(苹果系统中怎么删除软件)

  • 利润表里面的所得税
  • 赞助支出计入
  • 出售股东
  • 个人代开资金占用费,如何计算代扣代缴个税
  • 股东借款利息收入放什么科目
  • 资产负债表上的资产是原值还是净值
  • 结算金额大于合同金额
  • 开具有误拒收的增值税专用发票怎么办?
  • 机票的差额发票可以报销吗
  • 无形资产增资需要缴纳个税吗
  • 材料成本差异怎么理解
  • 纸质承兑怎么收付
  • 期初数录错了怎么改
  • 企业购买国债逆回购需要缴纳增值税吗
  • 债权投资类会计账务处理
  • 旧机动车交易需要哪些法定证件
  • 销项负数发票如何作废
  • 最新个人独资企业
  • 增值税专用发票可以开电子发票吗
  • 没建账的个体户如何交个人所得税?
  • 机打发票要不要税号
  • 2021年7月1日执行
  • 销售房地产要交培训费是传销行为吗
  • 一般纳税人注销库存需要补交税吗
  • 增值税影不影响企业利润
  • 财会报告需要哪些证书
  • 企业从境外收回所得税
  • wps的广告怎么关掉
  • 报销冲销借款
  • 怎么提升电脑速度
  • 往来款能转为投资款的说明
  • PHP:curl_pause()的用法_cURL函数
  • 收到现金股利或债券利息时会计分录
  • 促销商品的方法
  • b站怎么进抖音模式
  • 税控盘抵扣怎么做账
  • 装修费用记什么科目
  • 一般纳税人餐饮服务可以抵扣吗
  • 电子税务局里的自然人是什么意思
  • 技术服务费发票图片
  • 小规模开劳务费可以开多少
  • mysql内连接查询使用汉语作为官方语言的所有国家
  • Centos安装ntfs-3g
  • 设置sql server的安全认证模式为混合认证模式
  • 资产类会计科目记忆口诀
  • 辅助账簿属于会计档案吗
  • 委托开户银行发放上月工资
  • 房地产企业销售房屋印花税税率
  • 企业会计凭证怎么写
  • 什么叫代销合同
  • 办理产权证费用明细
  • 红冲凭证怎么做分录
  • 建筑劳务清包工账务处理
  • 汇算清缴预缴
  • 装订凭证需要注意事项
  • 发票上有银行流水号吗
  • 备用金的支取流程图
  • MySQL ALTER命令使用详解
  • sqlserver中将varchar类型转换为int型再进行排序的方法
  • navicat远程连接oracle
  • 制作win7系统安装u盘系统
  • 怎么关闭xp系统弹窗
  • 什么叫linux
  • 查看win8.1版本
  • sudo service: command not found 报错的解决方法
  • linux内核架构
  • 标记不能
  • 打开word显示
  • 系统干净启动
  • 在Html中使用Requirejs进行模块化开发实例详解
  • js数组拼接字符串
  • unity自带的ui叫什么
  • linux系统搜索文件内容
  • xcopy命令怎么用
  • for语句中的++i
  • shell脚本批量添加10个用户
  • python中tab
  • jquery常用操作
  • js类的静态属性
  • 车辆购置税怎样做账
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设