vue-router通過url傳遞參數給組件的props

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