位置: IT常识 - 正文

vue-router传参的四种方式超详细(vue router怎么传值)

编辑:rootadmin
vue-router传参的四种方式超详细 vue路由传参的四种方式一、router-link路由导航方式传参

推荐整理分享vue-router传参的四种方式超详细(vue router怎么传值),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue-router传值,vue route 传参,vue router参数传递,vue-router传值,vue router传参怎么获取,vue-router传递参数,vue-router传递参数,vue router传参,内容如对您有帮助,希望把文章链接给更多的朋友!

父组件:<router-link to="/跳转到的路径/传入的参数"></router-link> 子组件:this.$route.params.content接受父组件传递过来的参数

例如: 路由配置:

bashbash{path:'/father/son/:num',name:A,component:A}```

地址栏中的显示:

http://localhost:8080/#/father/son/44

调用方法:

<router-link to="/father/son/传入的参数">父亲组件<router-link> 子组件通过 this.$route.params.num 接受参数二、调用$router.push实现路由传参

父组件:通过实践触发,跳转代码

<button @click="clickHand(123)">push传参</button> methods: { clickHand(id) { this.$router.push({ path: `/d/${id}` }) } }

路由配置

{path: '/d/:id', name: D, component: D}vue-router传参的四种方式超详细(vue router怎么传值)

地址栏中显示:

http://localhost:8080/d/123

子组件接受参数方式

mounted () { this.id = this.$route.params.id}三、通过路由属性name匹配路由,再根据params传递参数

父组件:

<button @click="ClickByName()">params传参</button> ClickByName() { this.$router.push({ name: 'B', params: { context: '吴又可吴又可吴又可' } }) }

路由配置:路径后不需要在加上传入的参数,但是name必须和父组件中的name一致

{path: '/b', name: 'B', component: B}

地址栏中的显示:地址栏不会带有传入的参数,而且再次刷新页面后参数会丢失

http://localhost:8080/#/b

子组件接收参数的方式:

<template> <div id="b"> This is page B! <p>传入参数:{{this.$route.params.context}}</p> </div></template>四、通过query来传递参数

父组件:

<button @click="clickQuery()">query传参</button> clickQuery() { this.$router.push({ path: '/c', query: { context: '吴又可吴又可' } }) }

路由配置:不需要做任何修改

{path: '/c', name: 'C', component: C}

地址栏中的显示(中文转码格式):

http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6

子组件接受方法:

<template> <div id="C"> This is page C! <p>这是父组件传入的数据: {{this.$route.query.context}}</p> </div></template>

工作中经常用的也就是上面的几种传参方式,完结~ 欢迎点赞收藏哦

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

上一篇:基于PyTorch+Attention注意力机制实现天气变化的时间序列预测(基于核心素养下的大单元教学设计)

下一篇:【学Vue就跟玩一样】组件-非单文件组件的使用(vue学不懂怎么办)

  • ppt比例设置在哪里(ppt比例设置成什么最好)

    ppt比例设置在哪里(ppt比例设置成什么最好)

  • win10如何删除360导航强制主页(win10如何彻底删除360浏览器)

    win10如何删除360导航强制主页(win10如何彻底删除360浏览器)

  • 计算机是由什么组成(计算机是由什么和地址码组成的)

    计算机是由什么组成(计算机是由什么和地址码组成的)

  • 苹果11怎么关闭横屏(苹果11怎么关闭屏幕自动调节亮度)

    苹果11怎么关闭横屏(苹果11怎么关闭屏幕自动调节亮度)

  • qq注销后能申请回来吗(qq注销账号后还可以重新申请qq吗)

    qq注销后能申请回来吗(qq注销账号后还可以重新申请qq吗)

  • 苹果8充电完成怎么提示(苹果充电完成会显示充电已完成吗)

    苹果8充电完成怎么提示(苹果充电完成会显示充电已完成吗)

  • 华为每周六都有充值返利吗(华为每周六都有优惠券吗)

    华为每周六都有充值返利吗(华为每周六都有优惠券吗)

  • 电话没人接会是什么情况(电话没人接会是拉黑吗)

    电话没人接会是什么情况(电话没人接会是拉黑吗)

  • 抖音回关不了怎么回事(抖音回关不了怎么设置)

    抖音回关不了怎么回事(抖音回关不了怎么设置)

  • 全站仪红外线怎么开启(全站仪红外线怎么调)

    全站仪红外线怎么开启(全站仪红外线怎么调)

  • 第一台计算机的英文缩写(第一台计算机的电子元器件)

    第一台计算机的英文缩写(第一台计算机的电子元器件)

  • 淘宝可以追评几次(淘宝追评几天显示)

    淘宝可以追评几次(淘宝追评几天显示)

  • ipad第七代什么时候出(ipad第七代什么处理器)

    ipad第七代什么时候出(ipad第七代什么处理器)

  • 苹果vc是什么版本(vc是什么版本的苹果手机)

    苹果vc是什么版本(vc是什么版本的苹果手机)

  • 华为手机怎么解除密码(华为手机怎么解开密码)

    华为手机怎么解除密码(华为手机怎么解开密码)

  • 手机用不了耳机是怎么回事(手机用不了耳机设计)

    手机用不了耳机是怎么回事(手机用不了耳机设计)

  • 手机压缩包是什么意思(手机压缩包是什么可以删吗)

    手机压缩包是什么意思(手机压缩包是什么可以删吗)

  • word如何设置双面打印(word如何设置双面页码)

    word如何设置双面打印(word如何设置双面页码)

  • 华为m6怎么设置分辨率(华为M6怎么设置手写笔防误触)

    华为m6怎么设置分辨率(华为M6怎么设置手写笔防误触)

  • 苹果系统截图快捷键(苹果系统截图快捷键设置)

    苹果系统截图快捷键(苹果系统截图快捷键设置)

  • 抖音作品审核中怎么回事(抖音作品审核中怎么回事 赶紧隐藏)

    抖音作品审核中怎么回事(抖音作品审核中怎么回事 赶紧隐藏)

  • 怎么删除自己发的抖音短视频(怎么删除自己发的抖音)

    怎么删除自己发的抖音短视频(怎么删除自己发的抖音)

  • 一加有没有语音助手(一加有没有语音唤醒功能啊?)

    一加有没有语音助手(一加有没有语音唤醒功能啊?)

  • 从安卓设备转移到ios(从安卓设备转移到ios在哪里设置)

    从安卓设备转移到ios(从安卓设备转移到ios在哪里设置)

  • dmesg命令  显示开机过程信息(dmesg | grep tty)

    dmesg命令 显示开机过程信息(dmesg | grep tty)

  • 没有成本发票怎么缴纳企业所得税
  • 股权转让和变更法人一样吗?
  • 财务金额表格
  • d级企业预缴增值税什么时候可以退回
  • 企业所得税资产总额怎么算出来的呢
  • 债务重组损失是否属于营业外支出
  • 旧房转让土地增值税扣除项目
  • 培训发生的差旅费的会计准则有哪些
  • 何为售后租回
  • 外出经营预缴税
  • 补提企业所得税会计分录
  • 免抵退办法出口销售额和免税销售额的区别
  • 公司开出的经济补偿金可以税前扣除吗
  • 公司取得增值税怎么算
  • 有代扣个税的是什么人
  • 营改增后房地产开发税费一览表
  • 软件的维修性要求
  • 出口退税收入凭证怎么填
  • 关于医疗服务质量的医疗服务要素
  • 民办非企业单位属于什么类型
  • 在同一预缴地有多个项目的建筑业纳税人总销售额以什么为标准确定?
  • 银行承兑汇票没有提示付款
  • 资源管理器一直弹出
  • 计提企业所得税费用会计分录
  • windows11 微软
  • 赠品没有收到
  • php数组函数输出《咏雪》里有多少"片"字
  • 公司备用金申请单
  • 职工医疗保险补交6万与交居民每交300哪个合算?
  • 购买性支出和转移性支出的本质区别
  • 工业企业制造费用占比
  • 工具tj
  • 固定资产没有价值怎么入账
  • 专项应付款能转回来吗
  • 增值税的税目和税率
  • 只有发票没有合同可以做账吗
  • 一般纳税人第一次申请发票
  • mongodb 教程
  • discuz管理中心进不去
  • 部分货物退回怎么开票
  • 预期报酬率和期初报酬率
  • 社保怎么交最划算
  • 提供维修业务的税率是多少
  • 一般纳税人怎么算税
  • 免税苗木普通发票抵扣怎么在申报填写
  • 红字冲账的记账凭证
  • 汽车加油费属于交通费用吗
  • 记账凭证是不是转账凭证
  • 接受代销货物的会计分录
  • 公司市场部职能
  • 会计科目的设置原则包括( )
  • mysql多表查询方式
  • mysql主从复制原理以及架构
  • win7系统浏览器怎么设置
  • 一步一步教会你走路
  • 深度u盘装xp系统教程
  • ubuntu系统电脑开机键盘亮 屏幕不亮
  • ios太极
  • mmc.exe是什么进程
  • win8操作系统如何安装
  • win7网络访问权限
  • win7系统屏幕保护设置禁用如何开启
  • three.js加载glb文件
  • react-redux用法
  • js中script标签的作用
  • linux命令sed的用法
  • linux lvm配置
  • python中的__dict__
  • python利用matplotlib库绘制六边形
  • unity mesh编程
  • flash谈广告
  • 两种方法解决问题三年级下册
  • js实现继承的几种方式详述(推荐)
  • jquery跨域请求有哪些方式
  • jQuery模拟select实现下拉菜单功能
  • 增值税预缴税款退税申请怎么写
  • 出口退税备案单证目录
  • 税控盘口令密码怎么修改
  • 国税官网登录
  • 申报农业项目的程序是什么?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设