1.我們用<router-link>標簽中的to屬性進行傳參，需要您註意的是這裏的to要進行一個綁定，寫成:to

先來看一下這種傳參方法的基本語法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

這裏的to前邊是帶冒號的，然後後邊跟的是一個對象形勢的字符串.

• name：就是我們在路由配置文件中起的name值。
• params：就是我們要傳的參數，它也是對象形勢，在對象裏可以傳遞多個值。

2.我們把hi1頁面的<router-link>進行修改。

<router-link :to="{name:‘hi1‘,params:{username:‘jspang‘}}">Hi頁面1</router-link>

　　把src/reouter/index.js文件裏給hi1配置的路由起個name,就叫hi1.

 {path:‘/hi1‘,name:‘hi1‘,component:Hi1},

　　最後在模板裏(src/components/Hi1.vue)用$route.params.username進行接收.

{{$route.params.username}}

　　代碼：

HI1.vue

<template>
  <div class
 
="hello">
       <h1>
           {{msg}}-{{$route.params.username}}
       </h1>
  </div>
</template>

HI2.vue

<template>
  <div class="hello">
       <h1>
           {{msg}}-{{$route.params.username}}
       </h1>
  </div>
</template>

　APP.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>導航 ：
    <router-link to="/">首頁</router-link>
    <router-link to="/hi">Hi頁面</router-link>
    <router-link :to="{name:‘hi1‘,params:{username:‘德國‘}}">Hi頁面1</router-link>
    <router-link :to="{name:‘hi2‘,params:{username:‘巴西‘}}">Hi頁面1</router-link>
    </p>
    <router-view/>
  </div>
</template>

　　index.js

　效果：

2018-06-18 10:46:59

vue-router如何參數傳遞