一、用name傳遞引數

　　用name傳值並顯示在模板裡：

1. 1. 在路由檔案src/router/index.js裡配置name屬性。
      

      1234567

      routes: [    {      path: '/Message',      name: 'Message',      component: resolve => require(['../components/page/Message.vue'], resolve)    }]

          2.傳值頁面 寫法 ：

          注意：  listInfo 是值的名字， 在接收值的頁面 需要用到                 

3.接收值的頁面：

二、通過<router-link> 標籤中的to傳參

上邊的傳參或許很不正規，也不方便，其實工作中多數傳參是不用name進行傳參的，我們用<router-link>標籤中的to屬性進行傳參，需要注意的是這裡的to要進行一個繫結，寫成:to。先來看一下這種傳參方法的基本語法：

這裡的to前邊是帶冒號的，然後後邊跟的是一個物件形勢的字串.

• name：就是我們在路由配置檔案中起的name值。
• params：就是我們要傳的引數，它也是物件形勢，在物件裡可以傳遞多個值。

瞭解基本的語法後，我們改造一下我們的src/App.vue裡的<router-link>標籤,我們把hi1頁面的<router-link>進行修改。

把src/reouter/index.js檔案裡給hi1配置的路由起個name,就叫hi1.

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

vue-router 利用url傳遞引數

　　:冒號的形式傳遞引數

　　　　　　在路由配置檔案裡以:冒號的形式傳遞引數，這就是對引數的繫結。

1. 在配置檔案裡以冒號的形式設定引數。我們在/src/router/index.js檔案裡配置路由。
   

   1234	{    path:'/params/:newsId/:newsTitle',     component:Params}

   
   我們需要傳遞引數是新聞ID（newsId）和新聞標題（newsTitle）.所以我們在路由配置檔案裡制定了這兩個值。
2. 在src/components目錄下建立我們params.vue元件，也可以說是頁面。我們在頁面裡輸出了url傳遞的的新聞ID和新聞標題。
   

   123456789101112131415161718

   <template>    <div>        <h2>{{ msg }}</h2>        <p>新聞ID：{{ $route.params.newsId}}</p>        <p>新聞標題：{{ $route.params.newsTitle}}</p>    </div></template><script>export default {  name: 'params',  data () {    return {      msg: 'params page'    }  }}</script>

3. 在App.vue檔案里加入我們的<router-view>標籤。這時候我們可以直接利用url傳值了。
   

   1	<router-link to="/params/198/jspang website is very good">params</router-link> |

　　正則表示式在URL傳值中的應用

上邊的例子，我們傳遞了新聞編號，現在需求升級了，我們希望我們傳遞的新聞ID只能是數字的形式，這時候我們就需要在傳遞時有個基本的型別判斷，vue是支援正則的。

加入正則需要在路由配置檔案裡（/src/router/index.js）以圓括號的形式加入。

加入了正則，我們再傳遞數字之外的其他引數，params.vue元件就沒有辦法接收到。