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

  • 荣耀X30max怎么设置铃声(荣耀x30max怎么设置红包提醒)

    荣耀X30max怎么设置铃声(荣耀x30max怎么设置红包提醒)

  • wps中设置图片透明度在哪里(wps中设置图片透明度在哪)

    wps中设置图片透明度在哪里(wps中设置图片透明度在哪)

  • ps5怎么连接蓝牙耳机(ps5怎么连接蓝牙电脑)

    ps5怎么连接蓝牙耳机(ps5怎么连接蓝牙电脑)

  • 苹果手机进水没声音了怎么办(苹果手机进水没有声音)

    苹果手机进水没声音了怎么办(苹果手机进水没有声音)

  • 微信对方挂断怎么显示(微信对方挂断怎么设置)

    微信对方挂断怎么显示(微信对方挂断怎么设置)

  • 拍视频声音太小怎么办(拍视频的时候声音太小怎么办)

    拍视频声音太小怎么办(拍视频的时候声音太小怎么办)

  • 苹果封面的手电筒为什么点不了(苹果封面的手电筒和相机怎么打开)

    苹果封面的手电筒为什么点不了(苹果封面的手电筒和相机怎么打开)

  • 无线网需要认证是怎么回事(无线网需要认证但是打不开)

    无线网需要认证是怎么回事(无线网需要认证但是打不开)

  • 华为手机微信来信息没有声音怎么回事(华为手机微信来语音不响铃怎么设置)

    华为手机微信来信息没有声音怎么回事(华为手机微信来语音不响铃怎么设置)

  • word添加黄色底纹(word2010添加黄色底纹)

    word添加黄色底纹(word2010添加黄色底纹)

  • 华为电量剩20提示音关闭(华为电池剩百分20掉电快)

    华为电量剩20提示音关闭(华为电池剩百分20掉电快)

  • 135w笔记本能用65w适配器吗(135w的笔记本能用65w的充电器充吗)

    135w笔记本能用65w适配器吗(135w的笔记本能用65w的充电器充吗)

  • 怎么强行打通拉黑电话(怎么强制拨通对方电话)

    怎么强行打通拉黑电话(怎么强制拨通对方电话)

  • 无线网5g是什么意思啊(无线网络5g)

    无线网5g是什么意思啊(无线网络5g)

  • 在关系数据模型中域是指什么(在关系数据模型中,若属性A是关系R的主键)

    在关系数据模型中域是指什么(在关系数据模型中,若属性A是关系R的主键)

  • 华为手机怎么强制关机(华为手机怎么强制)

    华为手机怎么强制关机(华为手机怎么强制)

  • mate30音量键在哪(mate30令人崩溃的音量键)

    mate30音量键在哪(mate30令人崩溃的音量键)

  • vivo手机出现支付风险怎么办(vivo手机出现这种情况怎么办)

    vivo手机出现支付风险怎么办(vivo手机出现这种情况怎么办)

  • wps表格怎么筛选文字(wps表格怎么筛选出符合条件的数据)

    wps表格怎么筛选文字(wps表格怎么筛选出符合条件的数据)

  • 美图秀秀怎么修改图片大小(美图秀秀怎么修脖子)

    美图秀秀怎么修改图片大小(美图秀秀怎么修脖子)

  • 苹果x反向充电设置(oppofindx6可以反向充电吗)

    苹果x反向充电设置(oppofindx6可以反向充电吗)

  • 迅雷ios验证过期怎么办(迅雷验证过期了怎么恢复)

    迅雷ios验证过期怎么办(迅雷验证过期了怎么恢复)

  • 常用的前端大屏 适配方案(常用的前端大屏软件)

    常用的前端大屏 适配方案(常用的前端大屏软件)

  • vue下一代状态管理Pinia.js 保证你看的明明白白!(vue状态机)

    vue下一代状态管理Pinia.js 保证你看的明明白白!(vue状态机)

  • 好用的微信小程序日历组件(可滑动,可展开收缩,可标点)(好用的微信小程序邮箱有哪些)

    好用的微信小程序日历组件(可滑动,可展开收缩,可标点)(好用的微信小程序邮箱有哪些)

  • 职工旅游不计入福利费
  • 分支机构设立当年是否需要就地预缴企业所得税?
  • 地产企业预缴增值税政策
  • 劳务派遣小规模纳税人税率是多少
  • 发票开成了下属机构的可以报销吗
  • 红字发票信息表需要盖章吗
  • 股东出让个人股权流程
  • 企业盘活资产的方法有哪些
  • 个人所得税已申报税额合计是什么意思
  • 收到三代手续费返还
  • 开票系统年费怎么缴纳
  • 工程款先开票
  • 期初建账以前年度损益调整怎么转?
  • 酒店会计账务处理及税务申报
  • 小规模纳税人的条件
  • 购买材料,材料未验收入库,货款未付会计分录
  • 什么人可以领购房补贴怎么领取
  • 个税系统工资少报了怎么办
  • 职工食堂租赁费
  • 增值税总分机构可以汇总纳税吗
  • 在建工程产生废料收入的账务处理?
  • 消耗性生物资产
  • 如何免费获取Win11企业版
  • 克罗地亚佩列沙茨
  • windows11测试版升级正式版
  • 文件夹共享设置权限
  • ubuntu 安装vs code
  • 承租集体土地如何确权
  • 公司现金用途
  • win10系统多任务功能的快捷键
  • 舍夫沙万的蓝色是什么意思
  • 代理业务怎么记账
  • 二手车交易如何开票
  • php图片下载本地功能
  • 劳务外包会计分录最新
  • yolo改进方法
  • bom也称为
  • 设备租赁费属于设备费吗
  • php5魔术方法
  • php面试基础题
  • ps渐变透明效果怎么弄
  • 再生资源增值税退税优惠政策
  • 待报解预算收入怎么做账
  • 销售折扣现金流量表
  • 印花税漏交了有什么影响
  • 税务实名认证是法人还是办税人
  • MySQL: mysql is not running but lock exists 的解决方法
  • 临时工的劳务费需要申报个税吗?
  • 购车贷款分期利率
  • 车辆保险费如何缴纳印花税的
  • 企业所得税免税和减半征收
  • 饭店房屋的租赁合同范本
  • 合伙企业是否需要缴纳印花税
  • 月末无收入如何申请补贴
  • 主营业务税金及附加借贷方向
  • 以前年度财务费用漏记
  • 研发支出资本化和费用化的区别
  • 非房产企业出售土地,能否计算抵减地价款
  • 哪些工资属于社会福利
  • 判断数据库表是否为空
  • mysql常见语句总结
  • Windows 2008 R2 AD组策略-统一域用户桌面背景详细图文教程
  • Win7 64位系统声卡重装过程中出现失败的解决方法
  • 蓝屏 win7
  • centos5.4 安装
  • windows8使用技巧
  • win内存占用率过高
  • 如何使用u盘安装linux
  • win10使用ie8
  • cocos creator特效制作
  • linux怎么安装rz
  • 什么是批处理模式
  • unity shader视频教程
  • 怎么关闭android
  • js 原型方法
  • 事前监督的名词解释
  • 闽政通城乡居民养老保险认证
  • 江苏宿迁个体户那个园区好
  • 甘肃省国家税务局电子税务局
  • 湖南职工医保哪里交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设