vue-router單頁應用簡單示例（二）
我們先來理一下思路。
圖1:main.js
引入vue,App.vue,router/index.js文件
聲明要渲染的Id為app，將App.vue中的模版渲染到入口界面（就是打開localhost:8080會看到的那個頁面）。
圖2:App.vue
router-view是顯示路由內容的地方，比如/index. 就會顯示index.vue中的模版。
圖3:router/index.js
可以看到引入了components目錄下的Home.vue,Detail.vue。
並且配置了路由規則：地址為／的將會以Home組件中的模版也就是<template>標簽會顯示在App.vue中的<router-view></router-view>，地址為‘/detail/:id‘的將會以Detail 組件中的模版顯示在App.vue中的<router-view></router-view>。
解釋一下/detail/:id 是什麽意思，舉幾個例子大家應該就知道了，/detail/1 (id就為1) /detail/2（id就為2）
圖4:Home.vue
我們把關註點放在<home-header>和<list>上，這兩個是什麽標簽呢？
看下第54行，你會發現components（組件列表中）有從HomeHeader.vue和List.vue導入的HomeHeader和List組件。
這兩個組件中的模版也就是HomeHeader.vue中的<template>會顯示在<home-header>中,<lsit>同理。
再來看下第8行的v-for 語句，將會遍歷items數組，並把取到的數據傳到List.vue中。
這是什麽意思呢？
我們來看一下List.vue文件
圖5:List.vue文件
先看到52行，props是什麽意思呢？
這就引出了vue中的父子組件問題。
來看vue的官方文檔
構成組件
組件意味著協同工作，通常父子組件會是這樣的關系：組件 A 在它的模版中使用了組件 B 。它們之間必然需要相互通信：父組件要給子組件傳遞數據，子組件需要將它內部發生的事情告知給父組件。然而，在一個良好定義的接口中盡可能將父子組件解耦是很重要的。這保證了每個組件可以在相對隔離的環境中書寫和理解，也大幅提高了組件的可維護性和可重用性。
在 Vue.js 中，父子組件的關系可以總結為 props down, events up 。父組件通過 props 向下傳遞數據給子組件，子組件通過 events 給父組件發送消息。看看它們是怎麽工作的。
在Home.vue和List.vue中，Home.vue就是父組件，List.vue就是子組件。
Home.vue要渲染一個列表，而List.vue就是列表項，每一本書的書名和價格怎麽通過Home.vue告訴List.vue呢？
我們需要在List.vue中聲明一個props數組，寫入期望要得到的數據，就像List.vue52行那樣。
我們再看List.vue 第4行
<router-link :to="{ name: ‘detail‘, params: { id: price }}" class="lp_li_a">
name:detail 指明了路由需要定位到name為detail的組件中，看上面的路由規則，即為Detail.vue文件，params可以取到url中的參數，
這裏取的是id，並賦值給此實例的price屬性。
最基本的代碼結構已經介紹完成了，至此我們已經可以實現一個靜態數據的單頁應用了。
下一篇我們將會引入服務端數據
附上完整項目代碼：github傳送門
vue-router單頁應用簡單示例（二）