vue router單頁應用簡單示例（二）

我們先來理一下思路。

圖1:main.js

router-view是顯示路由內容的地方，比如/index. 就會顯示index.vue中的模版。

圖3:router/index.js

可以看到引入了components目錄下的home.vue,detail.vue。

解釋一下/detail/:id 是什麼意思，舉幾個例子大家應該就知道了，/detail/1 (id就為1) /detail/2（id就為2）

圖4:home.vue

我們把關注點放在和上，這兩個是什麼標籤呢？

看下第54行，你會發現components（元件列表中）有從homeheader.vue和list.vue匯入的homeheader和list元件。

這兩個元件中的模版也就是homeheader.vue中的會顯示在中,同理。

再來看下第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呢？

我們需要在list.vue中宣告乙個props陣列，寫入期望要得到的資料，就像list.vue52行那樣。

我們再看list.vue 第4行

<

router-link 
:to="}"
class
="lp_li_a"
>

這裡取的是id，並賦值給此例項的price屬性。

最基本的**結構已經介紹完成了，至此我們已經可以實現乙個靜態資料的單頁應用了。

附上完整專案**：github傳送門 

vue router 建立 vue 單頁應用示例

1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title title title 6 link rel stylesheet href css style.css 7 script src js vue.min.js scri...

vue spa單頁開發及vue router基礎

了解spa頁面跳轉方式 2種 spa 單頁跳轉方式 開發 hash模式 生產 h5利於seo history.pushstate test 只更改url,不會重新整理,手動重新整理後可能會404 npm install vue vue router axios bootstrap vue route...

vue router實現tab標籤頁（單頁面）詳解

vue router 是 vue.js 官方的路由外掛程式，適合用於構建標籤頁應用。vue 的標籤頁應用是基於路由和元件的，路由用於設定訪問路徑，並將路徑和元件對映起來，vue router 會把各程式設計客棧個元件渲染到正確的地方。首先，vue中的內容非常簡單，建立標籤，並指定路徑，渲染路由匹配到...