位置: 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工作原理

  • 电子税务局登陆密码总是错误怎么办
  • 月初没报完税可以开票吗
  • 公司缴纳养老保险不在个人账户里吗
  • 职工食堂费用计入管理费用
  • 库存暂估入账
  • 月末一般无余额的有
  • 去税务局申报增值税需要带税盘吗
  • 工程收入开票
  • 收到加工费普通发票怎么做账务处理
  • 非贸易付汇去银行汇款流程
  • 设置会计科目的步骤
  • 前期差错更正会引起所有者权益总额变动吗
  • 购买房产怎么确认收入
  • 印花税账务处理
  • 公司清算往来科目应该怎么处理?
  • 出口退税金额和进项税额不一致
  • 企业员工奖励款怎么做账
  • 滞留发票产生的原因主要包括哪些?
  • 代理报关业务
  • 购买国债兑现时要交税吗
  • 预收美元和发票的关系
  • 小规模纳税人代收水电费
  • 递延资产摊销属于什么科目
  • 销售结算款扣款怎么记账?
  • 小规模纳税人 核定
  • 债务重组收益会计处理
  • 软件产品即征即退申请表
  • 预付业务招待费会计分录
  • php封装api
  • win10如何打开regedit
  • 显示器显示频率设置
  • thinkphp5自定义标签
  • 销售滞后税务处理
  • 企业所得税纳税义务发生时间
  • 营改增后土地增值税如何计算
  • 总公司下的分公司如何做账
  • node.js环境搭建
  • php 替换
  • 旅游业哪些发票需要交税
  • springboot自动配置的注解
  • 其他应收款如何计提减值准备
  • 外购产品的会计分录
  • 织梦如何开启会员功能
  • 应收帐款质保金
  • mysql如何分类
  • 出售固定资产不确认收入
  • 2023年终奖一次性扣税对照表
  • 报废产品账务的处理方法
  • 利润表中资产减值损失为正数是什么原因
  • 绩效工资定义及标准
  • 处置子公司利润表怎么合并
  • 什么是电子发票如何打印报销
  • 捐赠利得计入资产成本吗
  • 产品成本核算有哪些方法
  • sql server的mdf文件怎么导入数据库
  • 分配服务器失败
  • xp系统打开注册表
  • ubuntu更新设置在哪
  • centos中如何查看ip地址
  • window7截图工具无法使用
  • ubuntu下添加新用户
  • dos查看进程占用cpu
  • linux groupdel命令详解
  • Win10系统无法运行程序
  • cocos2dx 3.5 ”hello world“解析
  • 怎么检测端口通不通
  • python做排序
  • pval 胶水
  • java物流管理系统
  • js网页自动化
  • jquery可以实现哪些效果
  • android开发app
  • socket客户端发送数据
  • unity shader saturate
  • 设置家的地址
  • 税务公众电话
  • 跨年的增值税专用发票怎么冲红或者是作废
  • 地税办理停保
  • 中国税务报多少钱
  • 代扣代缴企业所得税手续费
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设