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

  • 博客营销技巧:客户案例揽客户(博客营销技巧)

    博客营销技巧:客户案例揽客户(博客营销技巧)

  • iphone11pro的屏幕尺寸(iphone11pro的屏幕尺寸是多大)

    iphone11pro的屏幕尺寸(iphone11pro的屏幕尺寸是多大)

  • 网易云听别人的歌单会增加次数吗(网易云听别人的播客有记录吗)

    网易云听别人的歌单会增加次数吗(网易云听别人的播客有记录吗)

  • 微信删人会被对方知道吗(微信删人伤人吗)

    微信删人会被对方知道吗(微信删人伤人吗)

  • 云课堂有摄像头吗(云课堂摄像头怎么打开)

    云课堂有摄像头吗(云课堂摄像头怎么打开)

  • 苹果热点最多几个人连(苹果热点最多几个人连接在哪设置)

    苹果热点最多几个人连(苹果热点最多几个人连接在哪设置)

  • 鼠标和键盘插哪里(鼠标和键盘插哪个位置)

    鼠标和键盘插哪里(鼠标和键盘插哪个位置)

  • 注册阿里巴巴需要什么条件(注册阿里巴巴需要营业执照吗)

    注册阿里巴巴需要什么条件(注册阿里巴巴需要营业执照吗)

  • 第二代计算机所采用的主要逻辑元件是(第二代计算机所用电子元器件是)

    第二代计算机所采用的主要逻辑元件是(第二代计算机所用电子元器件是)

  • 华为nova5z指纹解锁在哪里(华为nova5指纹识别)

    华为nova5z指纹解锁在哪里(华为nova5指纹识别)

  • 怎样关联微信并同时收到信息(微信如何关联)

    怎样关联微信并同时收到信息(微信如何关联)

  • 小米手机怎样快速充电(小米手机怎样快速录屏)

    小米手机怎样快速充电(小米手机怎样快速录屏)

  • 第二个微信怎么申请(第二个微信怎么注销)

    第二个微信怎么申请(第二个微信怎么注销)

  • 内屏坏了不修会恶化吗(内屏坏了不修会不会越来越严重)

    内屏坏了不修会恶化吗(内屏坏了不修会不会越来越严重)

  • 华为mate30pro容易碎屏吗(华为mate30pro容易烧屏幕吗)

    华为mate30pro容易碎屏吗(华为mate30pro容易烧屏幕吗)

  • 电脑键盘上下左右怎么不能移动(电脑键盘上下左右键和wasd互换了怎么变回来)

    电脑键盘上下左右怎么不能移动(电脑键盘上下左右键和wasd互换了怎么变回来)

  • 苹果x怎么开启无线充电(苹果x怎么开启静音模式)

    苹果x怎么开启无线充电(苹果x怎么开启静音模式)

  • 华为al00是什么型号(华为al00是什么系列)

    华为al00是什么型号(华为al00是什么系列)

  • 新建word文档步骤(新建word文档有几种方法)

    新建word文档步骤(新建word文档有几种方法)

  • 使用STM32F103ZE开发贪吃蛇游戏(stm32f103教程)

    使用STM32F103ZE开发贪吃蛇游戏(stm32f103教程)

  • dedecms织梦的性能选项与其它选项的设置方法(织梦是什么框架开发的)

    dedecms织梦的性能选项与其它选项的设置方法(织梦是什么框架开发的)

  • 织梦模板Dedecms织梦文件目录结构全面解析教程(织梦模板如何安装)

    织梦模板Dedecms织梦文件目录结构全面解析教程(织梦模板如何安装)

  • 一次性医用外科口罩哪个牌子好
  • 个人所得税如何计算
  • 贸易公司开发票进项跟销项不符合怎么办
  • 存货的期末余额在借方还是贷方
  • 公司购买的
  • 利润表的所得税费用怎么填
  • 长期待摊费用摊销会计分录
  • 小规模纳税人开专票需要交税吗
  • 公益性捐赠的税收优惠政策
  • 多缴纳个人所得税怎么办
  • 进项税加计扣除什么时候开始的
  • 工会经费计提多了跨年
  • 免抵退税的账务处理
  • 收到银行退回的银行汇票多余款
  • 12月了还没找到工作怎么办
  • 银行手续费没拿可以退吗
  • 多交印花税申请怎么写
  • 研发样机是什么
  • 交股权印花税需要什么材料
  • 利润表的税金及附加怎么得出来
  • 企业所得税中准予扣除的损失
  • 记账凭证按照填列方式的分类包括
  • 商场 折扣
  • 购进一批材料,材料已经入库
  • 营业成本包括哪些会计科目
  • 个税房租和房贷抵扣一样吗
  • 飞鱼星路由器信号有点差怎么办
  • 软件无法运行解决方法
  • win10无法设置pin码怎么办
  • mac u盘
  • 行政单位房租收入上交分录
  • 超市收取进场费会计分录
  • 小规模纳税人怎么申报增值税报表
  • 低值易耗品报废账务处理
  • php 动态调用类方法
  • qiankun跨域问题
  • 会计期初余额和期末余额计算公式
  • 前端生成docx
  • SSD目标检测算法
  • vue封装组建
  • 微信小程序在哪里打开
  • php对象是什么类型的数据
  • js相关知识
  • java聚合工程
  • ps遇到了文件尾
  • 对方代垫包装费怎么做分录
  • 节日购买什么礼物发放职工
  • SQLite数据库常用语句及MAC上的SQLite可视化工具MeasSQLlite使用方法
  • 税号里面的0和O有区别吗
  • 个税申报月份错误怎么更改
  • 增量留底退税额计算
  • 小规模纳税人免税政策2023年
  • 个人的车由公司来投保可以吗
  • 车间装修预算表
  • 购房补贴退契税多久到账
  • 未确认融资费用账务处理
  • 收到货款比开票少怎么办
  • 劳务派遣的公司值得去吗
  • 积分兑换如何做表格分析
  • 印花税 不足
  • 客户付了订金后能退吗
  • 业务招待费的列支范围
  • 汇兑损益的税务处理
  • window怎么操作
  • dhcp client服务无法启动1083
  • mac系统如何安装双系统
  • linux如何修改文件创建时间
  • driver's
  • linux系统中的脚本文件一般以什么开头
  • linux开机流程详解
  • android本地保存数据
  • 网页跳转的实现方法
  • Node.js中的事件循环是什么
  • 深入解析抑郁症:什么是它的表现?别小看它的危害程度!
  • unity3d的作用
  • 发票开了,税务局上查不到信息是怎么回事
  • 怎么在国税网站取消已申报的财务报表
  • 电子税务局密钥不一致
  • 重庆税务电子发票登录
  • 工程增值税率从11%调整到9%
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设