vue-router通过url传递参数给组件的props

最新推荐文章于 2025-07-05 16:37:21 发布

原创最新推荐文章于 2025-07-05 16:37:21 发布 · 1.1w 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用Vue.js进行路由配置的方法，并演示了如何通过路由参数传递数据到目标组件，实现组件间的通信。文章详细展示了如何设置路由规则、定义组件及组件间的数据传递过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//router-view指定name
  <router-view name="modal"/>

//路由跳转地址页面
<template>
  <div class="hello">
    <ul>
    <router-link :to="{path:'/bvue',query:{a_data:[1,2,3],b_data:[4,5,6]}}">bvue</router-link>
    <router-link :to="{path:'/cvue',query:{c_data:{a:1,b:2,c:3}}}">cvue</router-link>
    </ul>
  </div>
</template>

//routes.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import bvue from '@/components/b'
import cvue from '@/components/c'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      components: {
        modal: HelloWorld
      }
    },
    {
      path: '/bvue',
      props: {
        modal: router => ({
          a_data: router.query.a_data,
          b_data: router.query.b_data
        })
      },
      components: {
        modal: bvue
      },
    },
    {
      path: '/cvue',
      props: {
        modal: router => ({
          c_data: router.query.c_data,
        })
      },
      components: {
        modal: cvue
      },
    }
  ]
})



//b.vue 通过props来接收数据

<template>
  <div class="b_vue">
   {{a_data}}==={{b_data}}
  </div>
</template>

<script>
export default {
  props:["a_data","b_data"]
}
</script>

//c.vue
<template>
  <div class="c_vue">
  <ul v-for="(key,item) in c_data">
    <li>{{key}} ---- {{item}}</li>
  </ul>
  </div>
</template>

<script>
export default {
  props:["c_data"]
}
</script>