位置: 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学不懂怎么办)

  • Applewatchseries6为什么亮绿灯(iwatch6aqi)

    Applewatchseries6为什么亮绿灯(iwatch6aqi)

  • 电脑温度高怎么解决(电脑温度)(电脑温度过高自动关机怎么解决)

    电脑温度高怎么解决(电脑温度)(电脑温度过高自动关机怎么解决)

  • 湖南健康码黄码怎么解除变成绿码(湖南健康码黄码怎么变绿)

    湖南健康码黄码怎么解除变成绿码(湖南健康码黄码怎么变绿)

  • 苹果微信扫一扫怎么使用(苹果微信扫一扫怎么添加到桌面小组件)

    苹果微信扫一扫怎么使用(苹果微信扫一扫怎么添加到桌面小组件)

  • 爱奇艺一个月会员怎么买(爱奇艺一个月会员怎么取消)

    爱奇艺一个月会员怎么买(爱奇艺一个月会员怎么取消)

  • pr可以打开什么格式的视频文件(pr用什么软件打开)

    pr可以打开什么格式的视频文件(pr用什么软件打开)

  • hry al00a是华为什么型号(hry_al00ta华为什么型号)

    hry al00a是华为什么型号(hry_al00ta华为什么型号)

  • airpodspro充电线为什么是typec(airpodspro充电线怎么用)

    airpodspro充电线为什么是typec(airpodspro充电线怎么用)

  • 为什么switch连不上网(为什么switch连不上蓝牙耳机)

    为什么switch连不上网(为什么switch连不上蓝牙耳机)

  • 电脑按任何键都没反应(电脑按任何键都会开机)

    电脑按任何键都没反应(电脑按任何键都会开机)

  • 视图分为哪几种(视图分为哪几种视图)

    视图分为哪几种(视图分为哪几种视图)

  • 运算器和什么称为cpu(运算器和什么称为中央处理器)

    运算器和什么称为cpu(运算器和什么称为中央处理器)

  • 手机有个眼睛的符号是什么(手机有个眼睛的图标怎么去掉)

    手机有个眼睛的符号是什么(手机有个眼睛的图标怎么去掉)

  • 手机不能录音怎么办(手机不能录音怎么设置)

    手机不能录音怎么办(手机不能录音怎么设置)

  • 快手直播伴侣闪退严重(快手直播伴侣闪电购)

    快手直播伴侣闪退严重(快手直播伴侣闪电购)

  • 怎么复制对方昵称快手(怎么复制别人好友)

    怎么复制对方昵称快手(怎么复制别人好友)

  • 电脑搜狗手写怎么设置(电脑搜狗手写怎么退出)

    电脑搜狗手写怎么设置(电脑搜狗手写怎么退出)

  • 天猫小黑盒怎么进入(天猫小黑盒怎么领取红包)

    天猫小黑盒怎么进入(天猫小黑盒怎么领取红包)

  • uc浏览器的隐藏空间在哪里(uc浏览器隐藏功能)

    uc浏览器的隐藏空间在哪里(uc浏览器隐藏功能)

  • uv钢化膜是什么(uv膜和钢化膜的区别)

    uv钢化膜是什么(uv膜和钢化膜的区别)

  • 转转退款多久到账(转转退款能立马到账吗)

    转转退款多久到账(转转退款能立马到账吗)

  • p20超级快充没了(华为p20充电没有超级快充了怎么回事)

    p20超级快充没了(华为p20充电没有超级快充了怎么回事)

  • 苹果换电池去哪里换(苹果换电池去哪里找维修店)

    苹果换电池去哪里换(苹果换电池去哪里找维修店)

  • word 表格怎么跨页(word表格怎么跨页断行)

    word 表格怎么跨页(word表格怎么跨页断行)

  • pcamoo是什么手机型号(pcamo0是什么手机)

    pcamoo是什么手机型号(pcamo0是什么手机)

  • 苹果手机怎样抖音合拍(苹果手机怎样抖音分身)

    苹果手机怎样抖音合拍(苹果手机怎样抖音分身)

  • Safari浏览器直接安装ipa文件(ios 的 safari 浏览器)

    Safari浏览器直接安装ipa文件(ios 的 safari 浏览器)

  • 一般纳税人做外账没有一点成本票怎么办?
  • 其他负债是流动负债还是非流动负债
  • 补缴的税款和罚款的会计处理
  • 联通的话费能干吗
  • 企业税分几种类型
  • 委托贷款利息如何计算
  • 国家研发补贴政策
  • 冲减收入怎么做账
  • 会计核算体系的重要性
  • 租金收入需要缴增值税吗
  • 收回多借差旅费
  • 设备安装成本如何核算
  • 应付股东款可以结转实收资本吗
  • 送现金券活动方案
  • 无形资产摊销的年限规定
  • 土地款可以抵扣土地增值税么
  • 企业关闭股东拿回投资款需要交税吗
  • 外籍人员个人所得税政策
  • 收到机动车发票怎么认证
  • 折让冲减的产品销售收入
  • 分公司交总公司管理费怎么做账
  • 经办人需要承担风险盘锦交通运输破坏营商环境
  • 金银首饰的消费税在什么环节
  • windows10office更新
  • macbookpro怎么安装双系统
  • 财务软件税率
  • php命令行执行文件
  • PHP+Mysql+jQuery实现发布微博程序 php篇
  • 解决http请求下无法开启麦克风问题
  • windows 平台
  • 其他应付款期初余额在哪方
  • 增值税有哪些类型的税种
  • php验证码扭曲效果怎么做
  • 免购车税政策
  • 技术安装工人包食宿
  • react router教程
  • 增值税加计扣除比例
  • 联邦学习攻击与防御综述
  • source命令怎么用
  • 怎么把其他应收款的转到其他应付款
  • 税收优惠与政府补助对于企业研发来说哪个优惠力度大
  • 企业补助怎么做会计分录
  • 建造合同新准则
  • php验证码源码
  • 织梦建站详细教程
  • 房屋扩建后折旧费怎么算
  • 电子发票该怎么打印出来
  • 向投资者分配现金股利为什么会导致所有者权益减少?
  • 积分获取和消费的关系
  • 简易征收为什么要进项税转出呢
  • 对公账户是怎样的
  • 我国耕地占用税使用的税率为
  • 固定资产报废废料收入要发票吗
  • 以货物抵应收账款的分录
  • 购货方尚未偿付的货款属于什么会计科目
  • 应收账款周转率范围多少合适
  • 全国统一电子发票查询
  • 什么是库存现金限额
  • 跨年做进项税额转出
  • 借款利息怎么记账
  • 判断某个字段的值是否在指定的范围内
  • soft version
  • windows7内部版本7601激活密钥
  • ntfs分区的优点
  • dgservice.exe是什么进程
  • windows xp无法访问samba共享夹
  • 如何改变linux终端界面的颜色
  • 通过u盘安装win11
  • 保存 linux
  • linux命令行怎么用
  • cocos2dx schedule
  • unity脚本编写教程
  • 推荐一篇故事并说明理由
  • nodejs 内存不断增长
  • 使用筷子就餐会不会传染乙肝病毒
  • JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
  • python利用range产生列表
  • js编写一个标准的单例模式类
  • flask框架下使用scrapy框架
  • 微信扫码开票的记录怎么查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设