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

  • pefmoo是什么型号的手机(pefm00是什么型号的手机)

    pefmoo是什么型号的手机(pefm00是什么型号的手机)

  • 魅族18充电功率多少(魅族18充电功率实测)

    魅族18充电功率多少(魅族18充电功率实测)

  • macbook充电灯一直显示橙色(macbook充电灯一直显示橙色 电量满)

    macbook充电灯一直显示橙色(macbook充电灯一直显示橙色 电量满)

  • 华为nova7支持指关节截屏吗(华为nova7支持指纹吗)

    华为nova7支持指关节截屏吗(华为nova7支持指纹吗)

  • 华为手表和手机连接不上怎么办(华为手表和手机步数怎么同步)

    华为手表和手机连接不上怎么办(华为手表和手机步数怎么同步)

  • 笔记本温度90度正常吗(笔记本温度90度危险吗)

    笔记本温度90度正常吗(笔记本温度90度危险吗)

  • 深度操作系统是哪个公司(深度操作系统20.2.2)

    深度操作系统是哪个公司(深度操作系统20.2.2)

  • 迅雷下载0kb什么情况(迅雷下载为0)

    迅雷下载0kb什么情况(迅雷下载为0)

  • sd和hd哪个像素高(hd和sd区别)

    sd和hd哪个像素高(hd和sd区别)

  • 钉钉直播出现检测麦克风异常(钉钉直播检测到直播播放异常,是否切换到兼容播放器)

    钉钉直播出现检测麦克风异常(钉钉直播检测到直播播放异常,是否切换到兼容播放器)

  • 台式电脑突然黑屏主机在运行屏幕没显示(台式电脑突然黑屏了,但是电脑还在运行)

    台式电脑突然黑屏主机在运行屏幕没显示(台式电脑突然黑屏了,但是电脑还在运行)

  • 苹果11pro max怎么设置动态壁纸(苹果11pro max怎么样)

    苹果11pro max怎么设置动态壁纸(苹果11pro max怎么样)

  • 蓝牙3.0和5.0区别(蓝牙3.0和5.0的区别)

    蓝牙3.0和5.0区别(蓝牙3.0和5.0的区别)

  • 买家确认收货后卖家多久收到钱(买家确认收货后申请7天无理由退货)

    买家确认收货后卖家多久收到钱(买家确认收货后申请7天无理由退货)

  • 流量hd什么意思(流量上面显示hd)

    流量hd什么意思(流量上面显示hd)

  • 百度云存照片安全吗(百度云存放照片安全么)

    百度云存照片安全吗(百度云存放照片安全么)

  • 速推版和定向版有什么区别(速推版和定向版哪个好贴吧)

    速推版和定向版有什么区别(速推版和定向版哪个好贴吧)

  • 手机搬家怎么打不开(手机搬家怎么打开扫一扫)

    手机搬家怎么打不开(手机搬家怎么打开扫一扫)

  • 手机qq提示音怎么改(手机qq提示音怎么自定义)

    手机qq提示音怎么改(手机qq提示音怎么自定义)

  • Reno Ace怎么设置解锁密码(reno ace rom)

    Reno Ace怎么设置解锁密码(reno ace rom)

  • 京东碎屏险怎么理赔(京东碎屏险怎么转让)

    京东碎屏险怎么理赔(京东碎屏险怎么转让)

  • bm49电池怎么更换(bm42电池尺寸)

    bm49电池怎么更换(bm42电池尺寸)

  • 抖音移除粉丝对方有提示吗(抖音移除粉丝对方还能发私信吗)

    抖音移除粉丝对方有提示吗(抖音移除粉丝对方还能发私信吗)

  • 探探和陌陌有什么区别(探探和陌陌什么关系)

    探探和陌陌有什么区别(探探和陌陌什么关系)

  • 无向图的邻接表怎么画(无向图的邻接表表示图)

    无向图的邻接表怎么画(无向图的邻接表表示图)

  • 360安全卫士如何清理缓存(360安全卫士如何查找大文件)

    360安全卫士如何清理缓存(360安全卫士如何查找大文件)

  • powerpnt.exe是什么进程 powerpnt进程查询(powergenie是什么程序)

    powerpnt.exe是什么进程 powerpnt进程查询(powergenie是什么程序)

  • 增值税发票认证在哪里
  • 认证一般纳税人之前取得的专票
  • 可供出售金融资产公允价值变动
  • 集体不动产和动产包括
  • 一个营业执照可以开几家淘宝店
  • 每月10万不要交税从什么时候开始
  • 食堂买菜无发票可以在费用中开支吗
  • 电子发票报销怎么用
  • 销售产品产生的运杂费分录
  • 房贷利息抵个税细则 两套房
  • 房地产土地增值税计税依据
  • 企业辅助生产车间
  • 属于制造费用的有
  • 退货但发票不冲销
  • 购进租赁设备分录
  • 建筑增值税抵扣怎么算
  • 国税未核定税种怎么处理
  • 销售不动产扣除项目有哪些
  • 外地派人来出差怎么报备
  • 长期待摊费用以后怎么摊销
  • 汽车维修发票是几个点
  • 业务费用包干制
  • 小微企业文化事业建设费是否可以享受减免
  • 航天维护费全额抵扣
  • linux关闭thp
  • 小型微利企业免税政策
  • 劳务公司的账务怎么做账
  • 如果工地老板拖欠工资怎么办
  • 营业款怎么存入公司账户
  • php sybase_fetch_array使用方法
  • createrectrgn
  • 区分不同情形
  • php错误级别有哪些
  • php模板引擎执行时间
  • php抽象类可以多继承吗
  • 个税申报系统操作指南
  • 简单描述php中的数组
  • 图像可以分成哪些类别?
  • 总结的拼音
  • 深究Python中的asyncio库-shield函数
  • 待抵扣进项税额是什么情况下用的
  • 金额太小不给开发票
  • 哪些合同必须签订书面合同
  • 摊销结束后
  • mysql如何打开使用
  • 一个人失恋了该怎么安慰她
  • 购进车辆的会计分录
  • 公司一般户需要年检吗
  • 企业不交所得税的情况
  • 财务报告与财务思维
  • 提供加工修理修配劳务包含哪些
  • 网上商城功能
  • 进项税额转出分录怎么写,附加的原始凭证是什么
  • 消费税会计分录处理
  • 企业购买二手车计提折旧年限
  • 银行存款会计分录需要输入哪些内容
  • 应付职工薪酬的账务处理
  • 公司挂靠有资质的企业公司会计处理?
  • 总公司中标走子公司账户违法吗
  • 工程内部承包合同
  • 公司买支票需要带什么资料
  • win7系统怎么合并分区
  • 电脑出现蓝屏后黑屏怎么办
  • 重装系统要注意哪些
  • win10注销是干嘛的
  • win7打开回收站
  • win8打不开咋办
  • python绘制球面
  • cocos设置中文
  • jquery+ajax实现注册实时验证实例详解
  • jquery 案例
  • linux bash中too many arguments问题的解决方法
  • js函数内置函数
  • Android使用教程
  • unity2d序列帧
  • Struts2+jquery.form.js实现图片与文件上传的方法
  • 玉林税务局班子成员
  • 人人财富最新消息
  • 江苏地方税务局电子税务局
  • 企业申报系统网址
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设