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

  • 饿了吗年度账单怎么看(饿了吗年度账单在哪里看)

    饿了吗年度账单怎么看(饿了吗年度账单在哪里看)

  • 台式电脑蓝牙设备在哪里(台式电脑蓝牙设置在哪里打开)

    台式电脑蓝牙设备在哪里(台式电脑蓝牙设置在哪里打开)

  • 华为荣耀9x是不是5g双模手机(华为荣耀9x是不是很重)

    华为荣耀9x是不是5g双模手机(华为荣耀9x是不是很重)

  • 微信把对方删除之后聊天记录还在吗(微信把对方删除了对方知道吗)

    微信把对方删除之后聊天记录还在吗(微信把对方删除了对方知道吗)

  • 天猫可以报名双十二吗(新开的天猫可以报名双十一吗)

    天猫可以报名双十二吗(新开的天猫可以报名双十一吗)

  • 苹果power在哪里(苹果poweramp)

    苹果power在哪里(苹果poweramp)

  • 微信怎么设置待办事项(微信怎么设置待机时不显示信息)

    微信怎么设置待办事项(微信怎么设置待机时不显示信息)

  • p40怎么退出应用(p40pro如何退出应用软件)

    p40怎么退出应用(p40pro如何退出应用软件)

  • 华为p40到底是不是2K屏幕(华为p40到底是不是5g)

    华为p40到底是不是2K屏幕(华为p40到底是不是5g)

  • b站为啥占好多手机内存(b站为啥占好多内存)

    b站为啥占好多手机内存(b站为啥占好多内存)

  • 青果摄像机闪退怎么办(青果摄像机闪退什么原因)

    青果摄像机闪退怎么办(青果摄像机闪退什么原因)

  • 快手登录请检查网络是否正常(为什么快手显示请检查网络是否正常,我明明联了网络鸭)

    快手登录请检查网络是否正常(为什么快手显示请检查网络是否正常,我明明联了网络鸭)

  • qq怎么上网课(qq怎么上网课分屏)

    qq怎么上网课(qq怎么上网课分屏)

  • 来电被拦截会提示什么(号码拦截了别人打电话会提示)

    来电被拦截会提示什么(号码拦截了别人打电话会提示)

  • qq独立密码能干啥(qq独立密码一般几位数)

    qq独立密码能干啥(qq独立密码一般几位数)

  • 快手怎么可以视频连麦(快手怎么可以视频连接)

    快手怎么可以视频连麦(快手怎么可以视频连接)

  • 华为耳机转换器怎么用(华为耳机转换器小米能用吗)

    华为耳机转换器怎么用(华为耳机转换器小米能用吗)

  • 快手视频超过10分钟怎么发(快手视频超过15分钟怎么发)

    快手视频超过10分钟怎么发(快手视频超过15分钟怎么发)

  • 电脑输入法怎么弄手写(电脑输入法怎么设置搜狗输入法)

    电脑输入法怎么弄手写(电脑输入法怎么设置搜狗输入法)

  • 分辨率的单位是什么(圆象分辨率的单位是)

    分辨率的单位是什么(圆象分辨率的单位是)

  • 苹果7诊断在哪里(苹果7诊断与用量在哪)

    苹果7诊断在哪里(苹果7诊断与用量在哪)

  • 手机能建文件夹吗(手机能建文件夹存照片?)

    手机能建文件夹吗(手机能建文件夹存照片?)

  • 魅族电话录音在哪里找(魅族电话录音在哪里找出来)

    魅族电话录音在哪里找(魅族电话录音在哪里找出来)

  • 个人所得税的纳税方式有哪几种
  • 销售免税产品是什么意思
  • 业务招待费可以进成本吗
  • 顺丰电子发票开错了可以重新开吗
  • 开办费抵扣多少企业所得税
  • 缴交社保基金会计分录怎么写?
  • 跨国避税
  • 自产自用增值税组成计税价格
  • 哪些发票可以报销抵税
  • 工伤抚恤金算遗产吗
  • 劳务费发票和建筑劳务费发票
  • 6位数开票代码
  • 小微 小型微利
  • 同一个单位,应收应付都有,怎么调账
  • 纳税义务发生时间和纳税期限的关系
  • 电子税务局如何查进项发票
  • 以前年度未分配利润属于什么科目
  • vue中的...
  • 出纳能不能兼开专票
  • 电脑文件启用宏是什么意思
  • 已删除好友的聊天记录
  • flash是什么文件
  • 支付宝账户收到100块钱如何用
  • PHP:mcrypt_enc_get_modes_name()的用法_Mcrypt函数
  • php消息队列kafka
  • 工费经费的计税依据要扣除含税部分吗
  • 旋转 目标检测
  • ChatGLM-6B:颠覆聊天AI的全新模型
  • 2023年我要实现的目标是
  • thinkphp如何做微服务
  • 比较好的微信名称有哪些
  • vue2 diff算法
  • python偏函数理解
  • 预提费用核算内容有哪些
  • 固定资产多少钱以上计入固定资产
  • 赔绿化损失费的法律规定
  • dedecms标签怎么用
  • 什么是代缴代扣
  • 固定资产清理怎么做账务处理
  • 简易征收适用哪些业务租赁
  • 怎么修改申报数据
  • 应付账款的入账时间为
  • 成本类科目会结转到损益类科目吗?
  • 保险再保业务
  • 行政单位与事业单位净资产的比较
  • 增值税的专用发票金额含税吗
  • 长期待摊费用未摊销完一次性处理怎么走
  • 公司从员工工资扣水电费
  • 弥补亏损的会计处理
  • 不能抵扣的会计分录
  • 企业开办费计入什么科目
  • CentOS中mysql cluster安装部署教程
  • 硬盘磁盘保护
  • ubuntu左侧菜单不见了
  • WIN10系统崩溃如何自救?
  • win8.1系统补丁
  • unity 链表
  • [置顶]bilinovel
  • jquery对动态生成的进行操作
  • androidstudio更改工程名字
  • css盒子模型示意图
  • cocos2dx怎么用
  • jquery获取表格一列的值
  • jquery网站开发
  • php编译安装常见的软件
  • 如何自动更正
  • apktool修改包名
  • unity监视器
  • python中的命名规范
  • jquery中的事件
  • android深度探索(卷1):hal与驱动开发
  • js调用键盘
  • js获取图片的宽高
  • 今天百度汉语
  • python的了解
  • 个体工商户年报补报流程
  • 80491232税务申报代码
  • 四川税务稽查举报电话
  • A级纳税人和一般纳税人区别
  • 法制员职责任务
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设