位置: 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字体设置渐变色)

  • 新科移动空调需要接排水管吗(新科移动电源)(新科移动空调需要加氟吗)

    新科移动空调需要接排水管吗(新科移动电源)(新科移动空调需要加氟吗)

  • win11桌面图标怎么设置(win11桌面图标怎么隐藏)

    win11桌面图标怎么设置(win11桌面图标怎么隐藏)

  • 小米mix4是曲面屏吗(小米mix4曲面屏曲度多少)

    小米mix4是曲面屏吗(小米mix4曲面屏曲度多少)

  • oppor11声音小解决方法(oppor11手机声音太小怎么办?教你一招)

    oppor11声音小解决方法(oppor11手机声音太小怎么办?教你一招)

  • 护眼模式要不要一直开

    护眼模式要不要一直开

  • 苹果xr副卡无服务怎么办(iphone xr副卡经常无服务)

    苹果xr副卡无服务怎么办(iphone xr副卡经常无服务)

  • 电脑磁盘空间不足怎么清理(电脑磁盘空间不足怎么办微信备份不了)

    电脑磁盘空间不足怎么清理(电脑磁盘空间不足怎么办微信备份不了)

  • 红米note7支持otg吗(红米note7支持内存卡扩展吗)

    红米note7支持otg吗(红米note7支持内存卡扩展吗)

  • 苹果xr能用两个微信吗(苹果xr可以用两个移动号码吗)

    苹果xr能用两个微信吗(苹果xr可以用两个移动号码吗)

  • 短信软件卸载了怎么办(短信卸载了怎么恢复正常)

    短信软件卸载了怎么办(短信卸载了怎么恢复正常)

  • 微信设置朋友圈权限后对方知道吗(微信设置朋友圈可见范围)

    微信设置朋友圈权限后对方知道吗(微信设置朋友圈可见范围)

  • 苹果手机不能接打电话怎么回事(苹果手机不能接受短信怎么回事)

    苹果手机不能接打电话怎么回事(苹果手机不能接受短信怎么回事)

  • 电脑睡眠下载还继续吗(电脑睡眠以后下载任务就停了吗)

    电脑睡眠下载还继续吗(电脑睡眠以后下载任务就停了吗)

  • ps图层怎么显示出来(ps图层怎么显示图层内容)

    ps图层怎么显示出来(ps图层怎么显示图层内容)

  • 华为lonal00什么型号(华为lonal00手机报价)

    华为lonal00什么型号(华为lonal00手机报价)

  • 华为荣耀9x摄像头怎么升降(华为荣耀9x摄像头)

    华为荣耀9x摄像头怎么升降(华为荣耀9x摄像头)

  • 苹果无法下载小红书怎么办(苹果无法下载小蝌蚪)

    苹果无法下载小红书怎么办(苹果无法下载小蝌蚪)

  • 抖音怎样删除实名认证(抖音怎样删除实名认证人)

    抖音怎样删除实名认证(抖音怎样删除实名认证人)

  • 车载蓝牙接收器怎么用(车载蓝牙接收器哪种好)

    车载蓝牙接收器怎么用(车载蓝牙接收器哪种好)

  • 腾讯能投屏吗(腾讯视频能投屏吗怎么投屏)

    腾讯能投屏吗(腾讯视频能投屏吗怎么投屏)

  • network boot是什么意思(network boot选项)

    network boot是什么意思(network boot选项)

  • pr可以剪辑音频吗(pr可以剪辑音频么)

    pr可以剪辑音频吗(pr可以剪辑音频么)

  • 天正软件怎么安装(2014版天正怎么安装)

    天正软件怎么安装(2014版天正怎么安装)

  • 笔记本电池保养中的几个误区(笔记本电池保养注意事项)

    笔记本电池保养中的几个误区(笔记本电池保养注意事项)

  • 三证合一后纳税人识别号和信用代码一样吗
  • 去年企业所得税税率是多少
  • 建筑服务增值税税率
  • 微店企业和个人的区别
  • 应收账款和应付账款的区别
  • 私企招残疾人可以辞职吗
  • 非营利组织管理规定
  • 股东实物分红账务怎么做
  • 成本未取得发票
  • 收到预付款项发票如何入账?
  • 开公司前期费用有什么
  • 增值税发票的基数是什么
  • 房地产发票冲红的步骤
  • 固定资产大修理和更新改造的区别
  • 水利基金免税额度是多少
  • 一万元国债一年多少利息
  • 收到注册资本需要开发票么
  • 所得税申报填写
  • 资产总额从业人数
  • 委托采购是什么意思
  • 进项税转出包括哪些
  • 公司筹备期的费用
  • php数组函数实现机选双色球
  • 更新网页证书
  • manjaro linux安装教程
  • 公司撤股后还要担责任吗
  • win11中文安装包
  • 债券到期收回本息计算单
  • NJeeves.exe - NJeeves进程文件是什么意思 有什么用
  • vue.js前端
  • 差旅费报销会计凭证
  • 周转材料摊销是什么科目
  • 内斯塔特点
  • phpqrcode 实例
  • 工会经费零申报怎么填
  • laravel 更新数据
  • 雷斯岬国家海岸公园有信号吗
  • vue $route
  • 最通俗易懂的电动力学教材
  • 人工智能agi
  • vue前端模板网站
  • 注意力机制 q k v
  • 养老保险进账金额
  • 企业交的社保包含什么
  • 城市道路占用费的收费标准
  • 红字记账是什么意思
  • 企业注销时实收资本没有到位要紧吗
  • 企业异地预交的税怎么算
  • 电子发票可以更改为纸质发票么
  • 个人劳务费用
  • 商业承兑汇票贴现率
  • 租赁合同的印花税怎么交
  • 建筑劳务公司税务筹划
  • 企业如何代员工做个税汇算清缴
  • 实收资本是什么科目
  • 购买其他权益工具投资时发生的交易费用
  • 进口货物的完税价格计算公式
  • 产业扶持资金账户是什么
  • 代扣代缴的增值税算进项税吗
  • 企业所得税汇算清缴时间
  • 应付账款明细账怎么登记
  • 酒店租金计入什么会计科目
  • 小规模纳税人销售货物税率是多少
  • 银行存款的收付应严格执行()的规定
  • 一般户可以发工资有什么后果
  • 小企业会计准则主要按照什么计量
  • 什么是经营所得现金
  • 劳务派遣中谁给劳动者发工资
  • 为什么我们需要政府
  • WINDOWS系统中删除放入回收站的文件占用什么空间
  • VMware虚拟机安装Android系统
  • 光盘做镜像文件
  • 华硕p8h61主板升级cpu
  • linux日期格式
  • javascript抢票
  • css实现下拉菜单的思路是
  • 深入理解新发展理念
  • 零基础学JavaScript
  • 如何查询企业税务评级
  • 新疆自治区国税局郑志全
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设