vue-router單頁應用簡單示例（一）

請先完成了項目初始化，具體請看我另外一篇博文。vue項目初始化

看一下完成的效果圖，很典型的單頁應用。

.vue後綴名的單文件組件

 

這裏先說一下我對組件的理解。組件，顧名思義就是一組元素組成的一個原件（理解的比較淺顯、直白），在Vue.js中，表現爲一個自定義元素。開篇展現的圖中，首頁的的列表中的每一項就能夠當作一個組件（事實上，在demo中，我也是這麼作的），這個組件由一張圖片，一個顯示價格的元素，一個顯示名稱的元素組成，我就能夠先把它定義爲一個list組件。

首先，咱們先來分析一下兩個頁面中組件，以下圖

 

 

主頁能夠看作由兩個組件組成，homeHeader和list組件，而詳情頁則能夠當作是有detailHeader跟下邊的圖文內容組成。

 

讓咱們分析一下.vue文件的組成

 

template

template是放置組件的組成部分——html元素的地方，是整個組件的模板構成，會在另外一個引用這個文件的組件中顯示出來。

 

style

style下放置組件的樣式，能夠用css預處理器less或者sass等，前提是須要安裝這些依賴包，和設置lang屬性，博主比較懶，直接用css了。這個style裏的樣式表在項目運行的時候會生成一個style標籤，插入到index.html的head標籤裏，若是組件裏的style標籤爲空，則會在index.html的head裏插入一個空的style標籤，因此，建議你們，這個組件沒有用到css，就不要寫一個空的style，直接省略就好。

 

既然每一個組件的樣式都會生成一個style插入到index.html中，咱們作的又是單頁面應用，全部的代碼都基於index.html的，那若是咱們的項目比較大或者是多人協做開發的，不免會在寫組件的時候會命名相同的class，這樣的話，具備相同class的不一樣組件的樣式就會收到影響，產生不可預估的樣式問題，那豈不是很頭疼。其實，vue早就替我想到了這個問題，能夠給style設置一個scoped的屬性，意思是該style裏的樣式只對這個組件起做用，不會影響其餘組件中含有相同class的元素。

 

script

script裏天然是放的js代碼。這裏會用到一些ES6的語法，你們能夠去  這裏 學習ES6的一些新的語法特性。在List.vue的script中，大體意思就是導出一個對象（這個組件），其中設置能夠經過屬性price和title傳遞數據。看下邊的示意圖

 

vue-router 2.0

因爲用vue主要開發單頁面應用，沒有頁面之間的跳轉，在vue中，一個所謂的「頁面」實則是一個看起來很像「頁面」的一個組件（這個組件大部分狀況下包含其餘子組件）而已。既然沒有頁面，那怎樣實現頁面之間的切換呢？那就是咱們如今要介紹的主角——vue-router 2.0。

vue-router是在vue中控制路由的。ps：若是你不太理解路由這個概念，能夠簡單的理解爲url重的hash部分，只不過vue作了一些封裝和完善。要控制路由，還須要藉助兩個vue-router自帶的兩個組件router-view和router-link。

 

router-view

router-view是現實路由內容的地方，即若是有多個「頁面」須要切換，顯示當前「頁面「的地方。須要注意的是，使用vue-router控制路由則必須router-view做爲容器。

 

router-link

router-link有一個to屬性，其屬性值是目標路由，在運行項目的時候，router-link表現爲a標籤，to屬性則表現爲a標籤的href屬性。

 

 這一篇是對vue-router的簡單介紹，從下篇開始將實際編碼。

附上完整項目代碼github傳送門