欢迎光临
我们一直在努力

Vue 四种路由传参方式

文章目录

router-link路由导航传参

发送

<router-link to = "/跳转路径/传入的参数">
</router-link>

接收

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

路由配置

{path: '/a/:num', name: A, component: A}

$router.push()

发送

<button @click="deliverParams(123)">
push传参
</button>
methods: {   
deliverParams (id) {
     this.$router.push({
     path: `/d/${id}`
    })
  }
}

接收

mounted () {
  this.id = this.$route.params.id
}

路由配置

{path: '/d/:id', name: D, component: D}

this.push() + 路由匹配

发送

<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>

路由配置

{path: '/b', name: 'B', component: B}

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>
赞(1) 打赏
未经允许不得转载:散人研 » Vue 四种路由传参方式
分享到: 更多 (0)

评论 抢沙发

3 + 6 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏