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

  • ie网页怎么创建桌面快捷方式(ie浏览器怎么添加网页)

    ie网页怎么创建桌面快捷方式(ie浏览器怎么添加网页)

  • 微信五星红旗渐变图片(微信五星红旗图标)(微信的五星红旗怎样打出来的)

    微信五星红旗渐变图片(微信五星红旗图标)(微信的五星红旗怎样打出来的)

  • 淘宝双十一定金可以退吗(淘宝双十一定金规则)

    淘宝双十一定金可以退吗(淘宝双十一定金规则)

  • 如何给ppt配上讲解声音(如何给ppt配上讲解)

    如何给ppt配上讲解声音(如何给ppt配上讲解)

  • 荣耀手机怎么设置横屏竖屏(荣耀手机怎么设置返回键在屏幕上)

    荣耀手机怎么设置横屏竖屏(荣耀手机怎么设置返回键在屏幕上)

  • 华为p50pro无线充电怎么开启(华为p50pro无线充电协议)

    华为p50pro无线充电怎么开启(华为p50pro无线充电协议)

  • 拉黑号码能收到短信吗(拉黑号码收到的拦截信息怎样才能看不到)

    拉黑号码能收到短信吗(拉黑号码收到的拦截信息怎样才能看不到)

  • 手机突然收到大量的验证码信息的原因(手机突然收到大量信息)

    手机突然收到大量的验证码信息的原因(手机突然收到大量信息)

  • qq登不了抖音没权限怎么回事(现在qq登不了抖音)

    qq登不了抖音没权限怎么回事(现在qq登不了抖音)

  • qq空间注销掉还能恢复吗(qq空间注销掉还显示吗)

    qq空间注销掉还能恢复吗(qq空间注销掉还显示吗)

  • 洛斐键盘是中国的吗(洛斐键盘是中国生产的吗)

    洛斐键盘是中国的吗(洛斐键盘是中国生产的吗)

  • 怎样下载手机铃声歌曲到手机上(怎样下载手机铃声来电铃声华为)

    怎样下载手机铃声歌曲到手机上(怎样下载手机铃声来电铃声华为)

  • ipad可以用otg吗(ipad能用usb吗)

    ipad可以用otg吗(ipad能用usb吗)

  • 网易云怎么搜索用户(网易云怎么搜索通讯录好友)

    网易云怎么搜索用户(网易云怎么搜索通讯录好友)

  • 手机交话费交错了怎么办(手机交话费交错了能退款吗)

    手机交话费交错了怎么办(手机交话费交错了能退款吗)

  • 抖音帮上热门对方知道吗(抖音帮上热门对自己账号有影响吗)

    抖音帮上热门对方知道吗(抖音帮上热门对自己账号有影响吗)

  • 哈罗软件扫码怎么点不开(哈啰出行扫一扫)

    哈罗软件扫码怎么点不开(哈啰出行扫一扫)

  • 苹果耳机怎么调下一曲(苹果耳机怎么调左右声道)

    苹果耳机怎么调下一曲(苹果耳机怎么调左右声道)

  • 海康录像机显示资源不足怎么解决(海康录像机显示网络不可达)

    海康录像机显示资源不足怎么解决(海康录像机显示网络不可达)

  • 蓝牙遥控器怎么使用(蓝牙遥控器怎么换电池)

    蓝牙遥控器怎么使用(蓝牙遥控器怎么换电池)

  • 小米8怎么查看屏幕信息(小米8怎么查看激活时间)

    小米8怎么查看屏幕信息(小米8怎么查看激活时间)

  • wps文档忘记保存关闭了怎么恢复(wps文档忘记保存了还能找回吗)

    wps文档忘记保存关闭了怎么恢复(wps文档忘记保存了还能找回吗)

  • 4 128g和6 128g有什么区别(6+128g和4+128g哪个好)

    4 128g和6 128g有什么区别(6+128g和4+128g哪个好)

  • win10专业版+企业版激活码分享 附激活工具(win10 专业版 企业版)

    win10专业版+企业版激活码分享 附激活工具(win10 专业版 企业版)

  • 织梦怎么取消后台登录的验证码(织梦如何使用不侵权)

    织梦怎么取消后台登录的验证码(织梦如何使用不侵权)

  • 长期待摊费用一般指什么
  • 天猫提现一直没到账
  • 当期所得税费用可以是负数吗
  • 待转销项税额是几级科目
  • 小规模纳税人收到专票后如何处理
  • 已收货款没发货怎么退款
  • 城建税计税依据扣除增值税期末留抵
  • 应税职工福利费在应纳税所得额里面吗
  • 税务证丢失可以注销吗
  • 无形资产账面价值和可收回金额孰低摊销吗
  • 高温补贴领取
  • 一般纳税人租赁费的税率是多少
  • 基金公司的资本结构
  • 报销发票财务一旦作废报销人可以收回吗?
  • 所得减免优惠明细表减免项目包括几项
  • 一般纳税人核定征收增值税
  • 坏账处理的所得税税率
  • 19年入职19年离职
  • 自己从自己公司直接拿钱是犯罪吗知乎
  • 承兑汇票延期托收证明
  • 一般纳税人税控盘维护费会计分录
  • 收到运费发票是进项还是销项
  • 销售利润率的计算公式,安全边际率
  • 来料加工需要交税吗
  • 火车票的进项税率是多少
  • 国家税务条例
  • 什么是债券持有人
  • 如何调整文件夹内文件的顺序
  • win10通讯
  • 航天信息服务费发票哪里打印
  • 业务招待费会计分录
  • uniapp如何使用
  • 清洁费用是属于什么科目
  • 小微企业的季度所得税怎么计算
  • 其他货币资金明细科目有哪些
  • 应付国库集中支付结余在什么时候确认
  • vue模块拖拽
  • Vue3入门笔记----登录功能
  • 不免征个人所得税的是个人转让著作权所得
  • 收到进项税发票
  • 收到退税收入
  • 微擎框架源码
  • 我有朋友吗朋友圈说说
  • 公司向个人借款合法吗
  • 出售抵债资产账务处理
  • 可转换公司债券名词解释
  • 工会经费按什么比例返还
  • 收到红字发票账务处理应附哪些资料呢
  • 财务报表中预收账款
  • 一家企业至少要运转几个月以上
  • 如何用u盘装系统win10
  • 删除了c盘文件
  • win8.1鼠标没反应
  • win10系统登录密码怎么取消
  • solaris 安装
  • 正常关机开机后爱奇艺自动卸载
  • centos6.0安装教程
  • linux vi命令详解菜鸟教学
  • 怎么才能把win7变win10
  • win10qq在哪里启动
  • win7自动更新失败怎么删除更新启动
  • jquery 点击按钮
  • 只有一行的矩阵的逆矩阵
  • js生成d.ts
  • android仿qq聊天
  • js实现登录功能
  • unity鼠标控制物体移动
  • jquery使用教程
  • webgl fbo
  • jquery trigger实现联动的方法
  • python编程完全入门教程
  • 每天一篇文章锻炼口才的文章
  • python项目打包发布
  • 安卓数据储存方式有哪些
  • python写监控脚本
  • 装饰装修公司需要什么
  • 消费税的税收优惠政策导向
  • 怎么看扣税明细
  • 综述与系统综述
  • 江苏税务局网上预缴税流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设