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傳送門