位置: IT常识 - 正文

Vue路由守卫(通俗易懂)(vue路由守卫用法)

编辑:rootadmin
Vue路由守卫(通俗易懂) 一.路由守卫就是:

推荐整理分享Vue路由守卫(通俗易懂)(vue路由守卫用法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3 路由守卫,vue 路由守卫,vue 路由守卫,vuerouter路由守卫,vuerouter路由守卫,vue3 路由守卫,vue路由守卫通配符,vue的路由守卫有什么应用场景,内容如对您有帮助,希望把文章链接给更多的朋友!

比如说,当点击商城的购物车的时候,需要判断一下是否登录,如果没有登录,就跳转到登录页面,如果登陆了,就跳转到购物车页面,相当于有一个守卫在安检

路由守卫有三种: 1:全局钩子: beforeEach、 afterEach 2:独享守卫(单个路由里面的钩子): beforeEnter、 beforeLeave 3:组件内守卫:beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

全局守卫

router.beforeEach() 进入之前触发

router.afterEach() 进入之后触发每个守卫方法接收三个参数:

Vue路由守卫(通俗易懂)(vue路由守卫用法)

①to: Route: 即将要进入的目标路由对象(to是一个对象,是将要进入的路由对象,可以用to.path调用路由对象中的属性)

②from: Route: 当前导航正要离开的路由

③next: Function: 这是一个必须需要调用的方法,执行效果依赖 next 方法的调用参数。

【路由守卫写在main.js文件,或者写在router文件夹下的index.js文件】① 前置路由守卫(每次切换前被调用)

首先先在需要配置路由守卫的地方加上 meta: { isAuth: true }

{ path: '/', name: 'Home', component: () => import('../views/Home.vue'), meta: { isAuth: true, title:'主页' }, },//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用router.beforeEach((to, from, next) => { //如果路由需要跳转 if (to.meta.isAuth) { //判断 如果school本地存储是qinghuadaxue的时候,可以进去 if (localStorage.getItem('school') === 'qinghuadaxue') { next() //放行 } else { alert('抱歉,您无权限查看!') } } else { // 否则,放行 next() }})② 后置路由守卫(每次切换后被调用)

是路由跳转之后执行的事件,可以用作跳转路由后更改网页名

首先路由的meta需要配置title的名字

{ path: '/', name: 'Home', component: () => import('../views/Home.vue'), meta: { isAuth: true, title:'主页' }, },//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用router.afterEach((to, from) => { document.title = to.meta.title || '默认名' //修改网页的title})③ 独享路由守卫(某一个路由所单独享用的路由守卫)

独享路由守卫只有前置没有后置

{ path: '/', name: 'Home', component: () => import('../views/Home.vue'), meta: { isAuth: true }, beforeEnter: (to, from, next) => { if (to.meta.isAuth) { //判断是否需要授权 if (localStorage.getItem('school') === 'qinghuadaxue') { next() //放行 } else { alert('抱歉,您无权限查看!') } } else { next() //放行 } } },④ 组件内守卫(某一个路由所单独享用的路由守卫)

独享路由守卫只有前置没有后置,直接写在.vue文件中

//通过路由规则,进入该组件时被调用beforeRouteEnter(to,from,next) { if(toString.meta.isAuth){ if(localStorage.getTime('school')==='qinghuadaxue'){ next() }else{ alert('学校名不对,无权限查看!') } } else{ next() }},//通过路由规则,离开该组件时被调用 beforeRouteLeave(to,from,next) { next()}
本文链接地址:https://www.jiuchutong.com/zhishi/300261.html 转载请保留说明!

上一篇:10倍效能不是梦:“软件工程3.0”之下软件研发(10倍理论)

下一篇:理解DALL·E 2, Stable Diffusion和 Midjourney工作原理

  • 荣耀magic3一键锁屏怎么设置(荣耀30 一键锁屏)

    荣耀magic3一键锁屏怎么设置(荣耀30 一键锁屏)

  • 苹果13的nfc怎么添加门禁卡(苹果13的nfc怎么设置门禁卡)

    苹果13的nfc怎么添加门禁卡(苹果13的nfc怎么设置门禁卡)

  • 淘宝支持微信支付吗(淘宝支持微信支付怎么办)

    淘宝支持微信支付吗(淘宝支持微信支付怎么办)

  • 抖音怎么关闭在线状态(抖音怎么关闭在线状态显示是亮绿灯吗?)

    抖音怎么关闭在线状态(抖音怎么关闭在线状态显示是亮绿灯吗?)

  • 华为荣耀30返回键在哪里(华为荣耀30返回键怎么设置位置)

    华为荣耀30返回键在哪里(华为荣耀30返回键怎么设置位置)

  • 魅族17和17pro有什么区别(魅族17和17pro哪个更值得购买)

    魅族17和17pro有什么区别(魅族17和17pro哪个更值得购买)

  • 手机微信没声音了如何恢复(手机微信没声音怎么调)

    手机微信没声音了如何恢复(手机微信没声音怎么调)

  • 老式台式电脑怎么连蓝牙音箱(老式台式电脑怎么连接手机个人热点)

    老式台式电脑怎么连蓝牙音箱(老式台式电脑怎么连接手机个人热点)

  • 苹果手机拒接电话是哪个键(苹果手机拒接电话在哪里查看)

    苹果手机拒接电话是哪个键(苹果手机拒接电话在哪里查看)

  • 程序设计语言处理系统是应用软件吗(程序设计语言处理程序有哪些?它们的作用是什么?)

    程序设计语言处理系统是应用软件吗(程序设计语言处理程序有哪些?它们的作用是什么?)

  • iphone摔了一下会影响硬件吗(iphone摔了一下会怎么样)

    iphone摔了一下会影响硬件吗(iphone摔了一下会怎么样)

  • 路由器哪几个灯闪是正常的(路由器哪几个灯亮正常能正常上网)

    路由器哪几个灯闪是正常的(路由器哪几个灯亮正常能正常上网)

  • 魅族16th支持24w快充吗(魅族16th支持快充吗)

    魅族16th支持24w快充吗(魅族16th支持快充吗)

  • 抖音号一天可以关注多少人(抖音号一天可以私信多少人)

    抖音号一天可以关注多少人(抖音号一天可以私信多少人)

  • oppor15触屏小圆圈怎么去掉(oppor15触屏时有圆点怎么办)

    oppor15触屏小圆圈怎么去掉(oppor15触屏时有圆点怎么办)

  • vue怎么给视频加字幕(怎么在vue视频添加马赛克)

    vue怎么给视频加字幕(怎么在vue视频添加马赛克)

  • 苹果x话筒在什么地方(苹果x话筒有杂音怎么办)

    苹果x话筒在什么地方(苹果x话筒有杂音怎么办)

  • win10双击安装包没反应(win10双击安装包点击没有反应)

    win10双击安装包没反应(win10双击安装包点击没有反应)

  • 咪咕视频会员有什么用(咪咕视频会员有效期怎么看不到)

    咪咕视频会员有什么用(咪咕视频会员有效期怎么看不到)

  • 关闭当前窗口快捷键(关闭当前窗口快捷键alt加什么)

    关闭当前窗口快捷键(关闭当前窗口快捷键alt加什么)

  • windows7如何升级windows10(windows7如何升级到10)

    windows7如何升级windows10(windows7如何升级到10)

  • 如何使用网络测试分析仪?(如何进行网络测试网速测试)

    如何使用网络测试分析仪?(如何进行网络测试网速测试)

  • 苹果手机系统更新教程(苹果手机系统更新在哪里找)

    苹果手机系统更新教程(苹果手机系统更新在哪里找)

  • 应交税费是什么科目
  • 印花税征税范围是什么
  • 房地产企业税率为5销售水泥怎么算
  • 不征税发票需要预缴税款吗
  • 企业股东分红可以不按比例分吗
  • 其他综合收益转入投资收益
  • 专用发票抬头一定要打完整吗
  • 投资性房地产账面价值大于公允价值计入什么
  • 行政单位要考什么
  • 房地产企业营销设施建造费包括哪些
  • 土地转让契税税率2020税率表
  • 财务软件怎样结转销售成本
  • 地产企业不动产登记入哪个科目?
  • 全年一次性奖金计税方式2023
  • 我公司只开了普票未开专票是否需要发票认证?
  • 增值税普通发票税率
  • 房地产企业所得税预缴
  • 外汇扣税是多少钱啊
  • 文化交流活动开展方案
  • 增值税普通发票有什么用
  • 出纳电汇流程
  • 管理费用劳务费包括什么
  • php b/s
  • PHP:disk_total_space()的用法_Filesystem函数
  • 结算备付金管理办法(2019年修订版)
  • 最好用的无人品牌子
  • 阿里云onedata
  • echart横坐标
  • php怎么添加背景图片
  • 上年未结转的成本今年可以结转吗
  • code alignment
  • php md5 16位
  • 不缴纳增值税
  • phpcms怎么修改模板风格
  • 个体工商户经济类型是内资吗
  • 国际货运代理公司排名
  • 固定资产科目的备抵科目
  • 哪些税金不需要通过应交税费科目核算
  • 人力资源外包服务企业
  • 网商贷企业贷款条件
  • php算法有哪些
  • mongodb查询字段不存在
  • 经营租赁会计的核算原则
  • 出口运费怎么入账
  • sql server 2008使用
  • 存货和固定资产一经计提减值以后期间不得转回
  • 固定资产加速折旧计算方法
  • 印花税的征收方式有哪些
  • 物业公司收的停车费做什么科目
  • 固定资产错记到费用了怎么办
  • 汇兑损益计入
  • 因员工过失造成的工伤用不用赔
  • 净资产少于1元
  • 企业购置生产要素所引起的本钱炜
  • 银行代扣水电
  • 收到承兑汇票如何写收据
  • 商品预计退回会扣钱吗
  • 跨年冲红发票账务处理需要调整申报表吗
  • 公司注册资金可以变更减少吗
  • 数据库表的查询学会了什么
  • sql server错误和使用情况报告
  • win7系统打开计算机的管理出现正在向控制台添加属性
  • mac电脑怎么安装ie浏览器
  • Windows移动中心里没有无线网络
  • centos用户添加到组
  • win10开机cpu占用率100%
  • windows10 不能启动
  • 如何配置sendmail
  • win10能运行的单机游戏
  • 网页shell命令
  • python标准库很庞大,它可以帮助处理各种工作,包括
  • C# list多字段排序sort
  • node中使用什么引入模块
  • 置顶聊天折叠怎么开启
  • JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
  • 国税网上开票怎么不显示界面
  • 退休人员还写工作单位吗
  • 国税怎么取消
  • 多缴税款可以抵滞纳金吗?
  • 太原市地税局各分局局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设