位置: 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比例设置成什么最好)

  • airpods有麦克风吗(airpods有麦克风功能吗)

    airpods有麦克风吗(airpods有麦克风功能吗)

  • 苹果11视频如何美颜(苹果11视频如何截图)

    苹果11视频如何美颜(苹果11视频如何截图)

  • 淘宝的免密支付在哪里设置(淘宝的免密支付怎么取消掉)

    淘宝的免密支付在哪里设置(淘宝的免密支付怎么取消掉)

  • 拼多多保证金规则(拼多多保证金阔值)

    拼多多保证金规则(拼多多保证金阔值)

  • 荣耀30是集成5g吗(荣耀30是集成5g基带吗)

    荣耀30是集成5g吗(荣耀30是集成5g基带吗)

  • 手机忽略蓝牙耳机怎么复原(手机忽略蓝牙耳机此设备)

    手机忽略蓝牙耳机怎么复原(手机忽略蓝牙耳机此设备)

  • 手机怎么下载电影(手机怎么下载电视遥控器)

    手机怎么下载电影(手机怎么下载电视遥控器)

  • 苹果x爱思显示屏显示空(苹果x爱思显示电池故障)

    苹果x爱思显示屏显示空(苹果x爱思显示电池故障)

  • 手机优化开不了机怎么回事(手机优化开不了机的原因)

    手机优化开不了机怎么回事(手机优化开不了机的原因)

  • 荣耀20s什么时候可以升级10.0(荣耀20s什么时候出的)

    荣耀20s什么时候可以升级10.0(荣耀20s什么时候出的)

  • 华为mate30pro音效怎么调(华为mate30pro音效怎么样)

    华为mate30pro音效怎么调(华为mate30pro音效怎么样)

  • 苹果手机闪光灯不亮了(苹果手机闪光灯在哪里关闭)

    苹果手机闪光灯不亮了(苹果手机闪光灯在哪里关闭)

  • ctrl键的快捷用法(ctrl快捷键常用)

    ctrl键的快捷用法(ctrl快捷键常用)

  • 蓝牙耳机一只充不上电怎么办(蓝牙耳机一只充不上电)

    蓝牙耳机一只充不上电怎么办(蓝牙耳机一只充不上电)

  • 京东厂家自送什么意思(京东厂家自送普通快递)

    京东厂家自送什么意思(京东厂家自送普通快递)

  • 拼多多在哪里投诉(拼多多在哪里投诉快递员?)

    拼多多在哪里投诉(拼多多在哪里投诉快递员?)

  • 怎么和siri聊天(怎样和siri聊天)

    怎么和siri聊天(怎样和siri聊天)

  • 苹果4怎么刷机(苹果4怎么刷机才能恢复出厂设置)

    苹果4怎么刷机(苹果4怎么刷机才能恢复出厂设置)

  • 拼多多月卡怎么续费(拼多多月卡怎么开通最便宜)

    拼多多月卡怎么续费(拼多多月卡怎么开通最便宜)

  • 苹果8p抬头灯怎么设置(苹果8plus抬头灯在哪里设置)

    苹果8p抬头灯怎么设置(苹果8plus抬头灯在哪里设置)

  • mate30怎么显示步数

    mate30怎么显示步数

  • 崽崽头像怎么弄(崽崽zepeto头像怎么换成网图)

    崽崽头像怎么弄(崽崽zepeto头像怎么换成网图)

  • 阿拉普扎的船屋,印度喀拉拉邦 (© Martin Harvey/The Image Bank/Getty Images)(阿普拉萨)

    阿拉普扎的船屋,印度喀拉拉邦 (© Martin Harvey/The Image Bank/Getty Images)(阿普拉萨)

  • python中如何获取当前文件的部分信息?(python中如何获取列表中的元素)

    python中如何获取当前文件的部分信息?(python中如何获取列表中的元素)

  • 什么是简易征税项目
  • 三个案例看清增值税即征即退?
  • 购买工业用地税费
  • 注册资本5块钱
  • 预收账款转营业外收入账务处理
  • 贴现的日期怎么算
  • 季度所得税申报表怎么申报
  • 新公司注册资金需要实缴吗
  • 企业所得税汇算清缴退税怎么做账
  • 退休回聘政策与程序
  • 账目不清什么意思
  • 无形资产报废的例题
  • 材料溢价分录
  • 固定资产清理营业外支出汇算清缴需要调增吗
  • 通用机打发票现在还有吗
  • 财产租赁合同印花税申报期限
  • 税务领取发票后怎么操作
  • 折旧费和摊销费怎么算
  • 培训费发票如何入账
  • 期间费用可以计入产品成本的费用吗
  • 小公司做帐
  • 公司买了一辆二手汽车,怎么入账
  • PHP:pg_field_name()的用法_PostgreSQL函数
  • php addslashes函数
  • 国际税收协定有哪些主要内容
  • 处理固定资产时的账务处理
  • php示例代码大全
  • 网上打印企业征信流程
  • 生物制品简易征收文件
  • 建行e信通怎么转让
  • CLIP(Contrastive Language-Image Pre-Training)简介
  • 玩转ChatGPT:中科院ChatGPT Academic项目部署与测评
  • php的运行环境有哪些
  • audit.exe
  • 应收票据包括哪些项目内容
  • 营业外支出的会计科目
  • 企业应收账款的主要内容
  • 维修费应该计入什么科目
  • 自定义函数是啥
  • 交通费 抵扣
  • 应收账款计入营业收入
  • 企业所得税退税怎么操作流程
  • 代扣员工伙食费
  • 减免增值税计入营业外收入影响利润
  • 门禁卡一般属于什么卡
  • PostgreSQL教程(十):性能提升技巧
  • 税控系统的维护包括哪些内容
  • 哪些情况可以开立基本账户
  • 建筑安装主要做什么
  • 其他应收款内部往来
  • 个贷系统平账专户A户付款会计分录
  • 个体工商户怎么变更法人
  • 买商品赠送赠品怎么做账
  • 预付卡发票如何做分录
  • 费用报销单如何审核
  • 工业企业外购材料支付的采购费用应计入什么账户
  • sqlserver表类型
  • mysql5.7.17下载
  • mysql alter table命令修改表结构实例
  • ubuntu的软件
  • 华硕主板如何刷系统
  • ubuntu下source、sh、bash、./执行脚本的区别详细介绍
  • win8安装界面
  • sstray.exe - sstray是什么进程 有什么作用
  • winxp开启远程控制
  • centos6.6
  • win10周年版
  • win10周年版
  • win8.1锁屏壁纸设置
  • dos cat命令
  • JavaScript中数组包含的属性和方法有哪
  • python 文件头
  • ajax简单实例
  • node.js调用c
  • js如何使用
  • html折叠
  • css实现无缝滚动
  • 进口lng需要什么资质
  • 税控系统技术维护费每年都要交吗
  • 增值税专用发票上传是什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设