位置: 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有没有智能助手(华为荣耀9x有没有红外线功能)

    华为荣耀9x有没有智能助手(华为荣耀9x有没有红外线功能)

  • 怎么注销快手账号(怎么注销快手账号极速版)

    怎么注销快手账号(怎么注销快手账号极速版)

  • 拼多多怎么出评价率高(拼多多怎么出评论那么难)

    拼多多怎么出评价率高(拼多多怎么出评论那么难)

  • 台式电脑反应慢是什么原因(台式电脑反应慢需要换什么)

    台式电脑反应慢是什么原因(台式电脑反应慢需要换什么)

  • 到目前为止的计算机都属于第几代(到目前为止的计算机都属于哪一代计算机)

    到目前为止的计算机都属于第几代(到目前为止的计算机都属于哪一代计算机)

  • 蚂蚁森林68g能量是什么(蚂蚁森林68g能量多少克)

    蚂蚁森林68g能量是什么(蚂蚁森林68g能量多少克)

  • 手机电板很快没电啦怎么办(手机电板很快没电的原因)

    手机电板很快没电啦怎么办(手机电板很快没电的原因)

  • 计算机网络由哪几部份组成(计算机网络由哪些硬件组成)

    计算机网络由哪几部份组成(计算机网络由哪些硬件组成)

  • 华为nova7pro有nfc功能吗(华为nova7pro有没有红外线)

    华为nova7pro有nfc功能吗(华为nova7pro有没有红外线)

  • prd加日期什么意思(prod加日期什么意思)

    prd加日期什么意思(prod加日期什么意思)

  • 虚拟陀螺仪和陀螺仪区别(虚拟陀螺仪和陀螺的区别)

    虚拟陀螺仪和陀螺仪区别(虚拟陀螺仪和陀螺的区别)

  • qq电话对方关闭麦克风自己能看到吗(qq电话对方关闭麦克风)

    qq电话对方关闭麦克风自己能看到吗(qq电话对方关闭麦克风)

  • 蓝牙耳机会影响网速吗(蓝牙耳机会影响音质吗)

    蓝牙耳机会影响网速吗(蓝牙耳机会影响音质吗)

  • 打印机扫描功能有什么用处(打印机扫描功能怎么用)

    打印机扫描功能有什么用处(打印机扫描功能怎么用)

  • 连接isp服务器超时怎么办(连接isp服务器超出范围)

    连接isp服务器超时怎么办(连接isp服务器超出范围)

  • nova3i是否支持nfc(nova3支不支持nfc)

    nova3i是否支持nfc(nova3支不支持nfc)

  • ie如何管理加载项(ie浏览器管理加载项启动不了)

    ie如何管理加载项(ie浏览器管理加载项启动不了)

  • vivo悬浮球有什么作用(vivo手机悬浮球app)

    vivo悬浮球有什么作用(vivo手机悬浮球app)

  • 键盘重启快捷键(台式电脑键盘重启快捷键)

    键盘重启快捷键(台式电脑键盘重启快捷键)

  • 国外微信怎么定位中文(微信怎么定外国位置)

    国外微信怎么定位中文(微信怎么定外国位置)

  • ps怎么处理过爆的高光(ps怎么修过度曝光的照片)

    ps怎么处理过爆的高光(ps怎么修过度曝光的照片)

  • 小米蓝牙耳机声音小怎么办(小米蓝牙耳机声音小音量已经是最大了)

    小米蓝牙耳机声音小怎么办(小米蓝牙耳机声音小音量已经是最大了)

  • 如何让微信静音(苹果手机如何让微信静音)

    如何让微信静音(苹果手机如何让微信静音)

  • 苹果手机微信怎么美颜视频聊天(苹果手机微信怎么分身)

    苹果手机微信怎么美颜视频聊天(苹果手机微信怎么分身)

  • 移动端适配方案有哪几种?(移动端适配方案面试题)

    移动端适配方案有哪几种?(移动端适配方案面试题)

  • 毕业设计-基于深度学习的交通标识识别-opencv(毕业设计基于Linux系统的NFS服务器搭建)

    毕业设计-基于深度学习的交通标识识别-opencv(毕业设计基于Linux系统的NFS服务器搭建)

  • Python数学建模三剑客之Matplotlib(数学建模python 怎么用)

    Python数学建模三剑客之Matplotlib(数学建模python 怎么用)

  • 资金性质生产性是什么意思
  • 含税价怎么算不含税价
  • 六大行业房产税土地使用税减免
  • 两处以上取得工资如何交社保
  • 对公帐户退款
  • 上个月发票忘记开了怎么办
  • 个人取得什么收入不交税
  • 境外演艺经纪公司代扣代缴哪些税款?
  • 残保金申报表怎么作废
  • 个人所得税计算器2023
  • 增值税免税收入汇算清缴的时候填哪
  • 代扣代缴个税手续费返还怎么操作
  • 税收预测表怎么填写
  • 自产自销流程图
  • 预付款税率是多少
  • 在建工程印花税计税依据
  • 应计入增值税一般纳税人认定标准的“年应税销售额”
  • 商誉在报表中如何填列
  • 季度所得税申报可以弥补以前年度亏损吗
  • 利润总额为负数净利润怎么算
  • 营业范围是销售范围吗
  • 企业借款利息收入企业所得税
  • 交割单会出错吗
  • 银行利息为什么只算10个月
  • 怎么写会计凭证
  • 职工教育经费是工资总额的多少
  • 清除不必要的内存
  • 公司劳务费收入涉及哪些税
  • 网络连接错误是什么意思啊
  • win10待机唤醒黑屏死机
  • 银行汇票和银行本票区别图解
  • window7怎么开机
  • 混合销售会计处理
  • 企业中秋晚会主持词
  • threejs loader
  • php检测是否登录
  • 从奎雷英山口看到的 Leum na Luirginn湖和Cleat湖,英国斯凯岛 (© Sebastian Wasek/Sime/eStock Photo)
  • 合作社分红怎么计算
  • 在暴风雪中求生
  • 微信小程序怎么制作自己的小程序
  • php数据查询
  • 命令行修改mbr
  • 兼职人员需要
  • 入库税款异常是啥意思
  • 一张专票可以开几项
  • 开票软件是什么图标
  • php判断数据类型
  • react context优化四重奏教程示例
  • 企业资产盘亏的定性依据
  • mongodb mongoose
  • 预缴分包抵扣,所有分包都可以抵扣吗
  • 网约车提现多久到账
  • 出口结汇有哪些常用方法?
  • sql 存储过程语句
  • 专票认证是在开票软件里吗
  • 变更法人流程和资料
  • 企业个人工资薪金换了电脑怎么能导得出来
  • 全资子公司并入母公司
  • 一般纳税人增值税减免政策2023
  • 前程无忧效果怎么样
  • 期末存货采用成本与什么孰低法计价
  • 买水果送礼
  • 如何搭建mybatis
  • sql hash
  • winxp关机立马自动重启
  • 苹果mac怎么清理缓存
  • Win10 Mobile 14393.321终于修复Lumia636/638导航栏遮挡
  • mac怎么打出@符号
  • win10访问局域网文件
  • ubuntu20.10安装教程
  • win10系统打开文件夹就不停的闪
  • 场景转换的技巧
  • javascriptz
  • vue父子组件之间的通讯
  • 前端编码规范 性能
  • Android spinner 的使用
  • js的实现原理
  • jquery选择器大全
  • 国家税务局福建省电子税务
  • 武汉市国税局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设