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

  • 华为运动手表怎么连接手机(华为运动手表怎么添加音乐)

    华为运动手表怎么连接手机(华为运动手表怎么添加音乐)

  • 微博私信有红色感叹号(微博私信红色圈圈是啥意思)

    微博私信有红色感叹号(微博私信红色圈圈是啥意思)

  • vivonex3s防水级别(vivonex3s手机防水吗)

    vivonex3s防水级别(vivonex3s手机防水吗)

  • x99主板配什么内存条(x99主板配什么固态盘)

    x99主板配什么内存条(x99主板配什么固态盘)

  • 手机大光圈拍照在什么时候使用(手机大光圈拍照照片比例为什么不能选全屏)

    手机大光圈拍照在什么时候使用(手机大光圈拍照照片比例为什么不能选全屏)

  • oppok3耗电快怎么办(oppok3手机费电应该关闭什么)

    oppok3耗电快怎么办(oppok3手机费电应该关闭什么)

  • 电脑多久换一次(电脑多久换一次电池)

    电脑多久换一次(电脑多久换一次电池)

  • 操作系统的功能由哪五部分组成(操作系统的功能分为哪些类型)

    操作系统的功能由哪五部分组成(操作系统的功能分为哪些类型)

  • word启动不了怎么回事(word2010启动不了)

    word启动不了怎么回事(word2010启动不了)

  • ps画圆快捷键(ps如何快速画圆)

    ps画圆快捷键(ps如何快速画圆)

  • 华为手机哪些文件可以删(华为手机哪些文件可以放在外置内存卡中)

    华为手机哪些文件可以删(华为手机哪些文件可以放在外置内存卡中)

  • 手机焦距怎么调(手机焦距怎么调到最大)

    手机焦距怎么调(手机焦距怎么调到最大)

  • 手机屏不亮怎么回事(手机屏不亮怎么调亮)

    手机屏不亮怎么回事(手机屏不亮怎么调亮)

  • 插队拼单是可以成功吗(插队拼单和拼单)

    插队拼单是可以成功吗(插队拼单和拼单)

  • oppo手机gps定位怎么开(oppo手机gps定位在哪里设置)

    oppo手机gps定位怎么开(oppo手机gps定位在哪里设置)

  • 苹果11输入法怎么设置(苹果11输入法怎么设置搜狗)

    苹果11输入法怎么设置(苹果11输入法怎么设置搜狗)

  • 小米备忘录在哪里打开(小米备忘录在哪里导出)

    小米备忘录在哪里打开(小米备忘录在哪里导出)

  • 拼多多怎么退订月卡(拼多多怎么退店铺)

    拼多多怎么退订月卡(拼多多怎么退店铺)

  • 怎么查看黑名单的短信(怎么查看黑名单的人是否打过电话?)

    怎么查看黑名单的短信(怎么查看黑名单的人是否打过电话?)

  • win10需要杀毒软件吗(win10要装杀毒软件)

    win10需要杀毒软件吗(win10要装杀毒软件)

  • wps表格怎么取消字体加粗(wps表格怎么取消保护)

    wps表格怎么取消字体加粗(wps表格怎么取消保护)

  • oppoa9通话声音小怎么办(oppor9手机通话音量变小了怎么办)

    oppoa9通话声音小怎么办(oppor9手机通话音量变小了怎么办)

  • 陌陌发动态,附近不显示(陌陌发动态,附近人不见)

    陌陌发动态,附近不显示(陌陌发动态,附近人不见)

  • 手机感应器在哪里设置(手机感应器在哪里设置方法)

    手机感应器在哪里设置(手机感应器在哪里设置方法)

  • 为Linux系统配置多语言环境的基本方法讲解(linux的系统配置文件)

    为Linux系统配置多语言环境的基本方法讲解(linux的系统配置文件)

  • 金融保险业税目
  • 运输公司的税率是多少
  • 未分配利润具体内容
  • 小规模差额征税全额开票和差额开票
  • 增值税加计抵减最新政策2022
  • 员工事假扣工资怎么做账
  • 开发票 专业设计服务
  • 转让无形资产增值税
  • 特定资产收益权融资业务
  • 退货手续费账务怎么处理
  • 置换新房产支付资金怎么纳税?
  • 部分预收账款会计科目
  • 企业将存货低价出售处理要如何做会计处理?
  • 三栏式明细账适用于哪些账簿
  • 个体工商户税务登记证需要什么资料
  • 出口佣金会计分录
  • 投资基金是什么科目
  • 进料加工出口退税计算 计划分配率
  • win10系统共享打印机报错0x0000011b解决办法
  • 企业注销时往来账目挂账怎么处理
  • 收到分包公司工程发票收入怎么做账
  • 百货商场会计账怎么做
  • php值传递和引用传递 原理
  • PHP:curl_pause()的用法_cURL函数
  • 微软win11预览版
  • php 设计模式
  • 债务重组利得计入投资收益还是营业外收入
  • 注册造价师挂靠费如何缴个税?
  • 工厂土地被抵押厂房怎么办
  • php gtk
  • 小企业会计准则没有以前年度损益调整科目
  • 琥珀山庄位于我国哪个省
  • 用php制作日历2020日历表
  • vue3项目实战
  • 登记会计账簿的实训总结
  • 怎么查是一般纳税人还是小规模
  • 无租房合同可以贷款吗
  • 高铁票进项抵扣计算错了 怎么办理
  • sqlserver存储过程语法
  • 补充登记法是全部都用蓝字吗
  • 借款怎么入会计分录
  • 利息收入的会计科目
  • 公司汽车租赁开什么税目
  • 企业股东撤资如何清算
  • 租赁收入属于什么行业
  • 收购票票样
  • 接待客人的场合
  • 企业日常发放的贷款
  • 管理费用属于什么成本
  • 个人承担的社保算公司的费用吗
  • 错误原始凭证怎么写
  • 计提资产减值是好事还是坏事
  • mysql5.7.29安装
  • solaris教程
  • 如何修改注册表键值
  • win7系统打开计算机的管理出现正在向控制台添加属性
  • 服务器centos6.8安装教程
  • 利用系统的公文有哪些
  • os x yosemite wifi断线怎么办?yosemite wifi掉线解决详细步骤
  • smon进程
  • 关闭win7屏保
  • 删除隐藏文件命令
  • 如何dj
  • 延长药品使用时间的方法
  • win7网页有错误如何修复?
  • 用jQuery.ajaxSetup实现对请求和响应数据的过滤
  • linux sleep 2
  • linux怎么全盘备份
  • nodejs mysql库
  • node.jsexpress
  • 设计一个投票程序
  • jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
  • CLASS_CONFUSION JS混淆 全源码
  • android学什么
  • 怎么在手机开数据那里看用了多少流量
  • 大连明珠卡手机nfc充值
  • 房产税的计税依据与税率分别是什么
  • 外贸企业出口退税流程及账务处理
  • 教育培训行业的发展
  • 企业所得税涉税申报情况进行核查
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设