位置: IT常识 - 正文

Vue3 中 导航守卫 的使用(vue-router导航守卫)

编辑:rootadmin
Vue3 中 导航守卫 的使用 目录前言:一、什么是导航守卫?二、导航守卫有哪几种?1、全局守卫(3个)全局前置守卫全局解析守卫全局后置钩子2、路由独享守卫(1个)3、组件内守卫(3个)beforeRouteEnter(to, from, next)beforeRouteUpdate(to, from, next)beforeRouteLeave(to, from, next)三、导航守卫的三个参数四、如何在 vue3 中使用 beforeRouteEnter五、模拟登录注册案例总结:前言:

推荐整理分享Vue3 中 导航守卫 的使用(vue-router导航守卫),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue导航实现,vue路由守卫导航栏权限配置,vue导航守卫实现登陆注册实例,vuerouter导航守卫,vue中的导航守卫,vue导航守卫实现登陆注册实例,vue-router导航守卫,vuerouter导航守卫,内容如对您有帮助,希望把文章链接给更多的朋友!

在编写vue里的登录注册时,我们始终绕不开对导航守卫的使用,vue-router4.0版里有一些重要更新,在这里分享给大家。

一、什么是导航守卫?

正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的。

查看以下情形:

Vue3 中 导航守卫 的使用(vue-router导航守卫)

点击主页链接时,默认情况下可直接进入指定界面,如图,但是问题是该跳转的界面是需要用户登录后方可访问的

可设置导航守卫来检测用户是否登录,如果已登录,则进入后台页,如果未登录,则强制进入登录页,如图

二、导航守卫有哪几种?1、全局守卫(3个)全局前置守卫

每次发生路由的导航跳转时,都会触发全局前置守卫,因此,在全局前置守卫中,程序员可以对每个路由进行访问权限的控制

1、 使用方式

你可以在router/index.js 页面中使用router.beforeEach((to, from, next) => {}) 注册一个全局前置守卫。

2、 代码:// router/index.js 页面router.beforeEach((to, from, next) => { console.log(to, from); next()});全局解析守卫1、 使用方式

你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,因为它在 每次导航时都会触发,但是确保在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被正确调用。

2、 代码:// router/index.js 页面router.beforeResolve((to, from, next) => { console.log(to,from); next()})全局后置钩子1、 使用方式

你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身:

2、 代码:// router/index.js 页面router.afterEach((to, from) => { console.log(to,from);})

它们对于分析、更改页面标题、

本文链接地址:https://www.jiuchutong.com/zhishi/300022.html 转载请保留说明!

上一篇:有趣的HTML实例(二) 404页面(有趣的html简单代码)

下一篇:CSS 实现文字渐变色(css字体设置渐变色)

  • 递延所得税资产账务处理
  • 珠宝首饰可以开发票吗
  • 水利建设专项收入的税率是多少?
  • 小规模未达起征点销售额是多少
  • 医院员工工资表模板
  • 上市公司存货跌价准备怎么看
  • 结算本月应付职工工资40000元
  • 个人所得税0申报逾期
  • 国家认定的高新技术企业是什么意思
  • 小规模纳税人如何计算增值税
  • 空报税怎么报
  • 关于城建税教育费附加地方教育附加的计算
  • 合伙项目如何进行分红
  • 工程项目管理人员任命书
  • 总分机构异地移送
  • 材料采购的合同价款
  • 已经上传的红字怎么修改
  • linux怎么翻译
  • php开源软件
  • 免抵退税怎么做账
  • 年终奖一般发什么奖品
  • 科技三项费用拨款共计5000万元
  • Obsidian:实现日记记录【设计并使用模板】
  • 挪威最北部
  • 税务机关如何判别c开发票视频
  • 可供出售金融资产在资产负债表日反映的是
  • 解决laravel 5.1报错:No supported encrypter found的办法
  • 金税盘减免税款留抵
  • 政府购买服务交几险
  • 支付贷款利息属于筹资活动吗
  • 什么是临时雇佣
  • 解决问题对吗
  • phpcms api
  • 进项税额漏报处理办法
  • 关联方占用资金应对措施
  • 企业之间借款有利息要开票吗
  • 住房租金专项附加扣除
  • 小规模企业免税收入会计分录
  • 什么是稳岗补贴呢
  • 研发支出是
  • 收到保险公司赔偿款怎么入账
  • 软件购买商城
  • 城建税及教育附加税税率是多少
  • 应收应付账款统计表
  • 调试机器要注意事项
  • 期初建账库存现金如何填写
  • 村集体经济组织的银行存款可以向外单位或个人出租出借
  • 发票已经认证是什么意思
  • 进口医疗器械产品
  • 固定资产标准提高是政策变更吗
  • 营业执照经营范围怎么变更
  • sql server服务器模式
  • sql纵向排列改为横向
  • windows vista秘钥
  • linux临时目录在哪
  • win10周年更新版是什么意思
  • linux配置java环境变量无法保存并退出
  • 在Linux系统中安装镜像步骤
  • win10系统怎么修改字体大小
  • 电脑windows xp
  • win7如何设置屏幕不黑屏
  • linux简明教程
  • win8.1删除所有内容并重新安装
  • sendmail邮件服务器
  • win8应用商店停止服务
  • linux如何使用双屏
  • linux如何绑定域名
  • cocos做游戏
  • 创建ubuntu
  • html怎么下
  • shell脚本解压tar文件
  • jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
  • python做脚本语言怎么用
  • javascript project
  • 江苏省电子税务局电话
  • 增值税预缴税款退税申请怎么写
  • 江西省企业社会保险费缴费指南
  • 江苏地税局官网网站
  • 税务局查帐怎么查
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设