vue路由传值的几种方式

顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效

文章目录


一、vue路由传值的四种方式?

  • 利用"router-link"路由导航来传递;
  • 调用"$router.push"实现路由传参数值
  • 通过路由属性中的name匹配路由,再根据params传递参数值
  • 通过query来传递参数值

二、使用步骤

1.router-link路由导航

父组件: 使用<router-link to = "/跳转路径/传入的参数"></router-link>

例如<router-link to="/a/123">routerlink传参</router-link>

子组件: this.$route.params.num接收父组件传递过来的参数

mounted () {

  this.num = this.$route.params.num

}

路由配置:{path: '/a/:num', name: A, component: A}

地址栏中的显示:http://localhost:8080/#/a/123


2.调用$router.push实现路由传参

父组件: 绑定点击事件,编写跳转代码

<button @click="deliverParams(123)">push传参</button>

  methods: {

    deliverParams (id) {

      this.$router.push({

        path: `/d/${id}`

      })

    }

  }

子组件: this.$route.params.id接收父组件传递过来的参数

mounted () {

  this.id = this.$route.params.id

}

路由配置:{path: '/d/:id', name: D, component: D}

地址栏中的显示:http://localhost:8080/#/d/123


3.通过路由属性中的name匹配路由,再根据params传递参数

父组件: 匹配路由配置好的属性名

<button @click="deliverByName()">params传参</button>

    deliverByName () {

      this.$router.push({

        name: 'B',

        params: {

          sometext: '熊出没'

        }

      })

    }

子组件:

<template>

  <div id="b">

    This is page B!

    <p>传入参数:{{this.$route.params.sometext}}</p>

  </div>

</template>

路由配置: 路径后面不需要再加传入的参数,但是name必须和父组件中的name一致
{path: '/b', name: 'B', component: B}

地址栏中的显示: 可以看出地址栏不会带有传入的参数,且再次刷新页面后参数会丢失
http://localhost:8080/#/b

4.通过query来传递参数

父组件:

<button @click="deliverQuery()">query传参</button>

    deliverQuery () {

      this.$router.push({

        path: '/c',

        query: {

          sometext: '我是光头强'

        }

      })

    }

子组件:


<template>

  <div id="C">

    This is page C!

    <p>这是父组件传入的数据: {{this.$route.query.sometext}}</p>

  </div>

</template>

路由配置: 不需要做任何修改
{path: '/c', name: 'C', component: C}

地址栏中的显示: 相当于在url地址后面拼接参数(中文做了转码)
http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6

总结

以上就是vue路由传值的几种方式是什么的详细内容

参考文章地址:Vue路由传参

  • 5
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值