Vue - 路由

新建頁面，建立路由是常常要作的事，而我老是站在前人的基礎上，簡單粗暴看下官網的教程，按着他們的格式建立和增長，本身建立項目也是看着教程走，不肯多動腦子去好好想一想，因此某些概念老是模棱兩可和記不住。

（1）前端中的路由是什麼？

  簡單來講就是根據不一樣的 url 地址展現不一樣的內容或頁面

（2）用於什麼場景？

  前端路由更多用在單頁應用上, 也就是SPA（單頁應用程序）, 由於單頁應用, 基本上都是先後端分離的, 後端天然也就不會給前端提供路由。

（3）什麼是單頁應用？

  SPA是一種特殊的Web應用。它將全部的活動侷限於一個Web頁面中，僅在該Web頁面初始化時加載相應的HTML、JavaScript、CSS。一旦頁面加載完成，SPA不會由於用戶的操做而進行頁面的從新加載或跳轉，而是利用JavaScript動態的變換HTML，實現UI與用戶的    交互。與單頁應用相呼應的是多頁應用。

（4）什麼是多頁應用？

  每一次頁面跳轉的時候，後臺服務器都會給返回一個新的html文檔，這種類型的網站也就是多頁網站，也叫作多頁應用。

（5）單頁應用與多頁應用的比較

                                       單頁面應用                                                                             多頁面應用                            

組成                           一個外殼頁面和多個片斷頁面組成                                        多個完成的html頁面組成

頁面跳轉                     片斷頁面之間的切換，共用外殼頁面                                     從一個完整的頁面跳轉到另一個完整頁面

刷新方式                     頁面片斷的局部刷新                                                          整頁刷新

url模式                      http://xxx/flight.html                                                     http://xxx/flight/page1

用戶體驗                     頁面間片斷切換快，用戶體驗好                                           頁面間切換慢，不流暢，用戶體驗差

頁面間數據傳遞            依賴從url提取參數，cookie，localStorage等，較麻煩            在一個頁面內，頁面片斷間傳遞數據容易

 

以上爲參考大部分博客總結的某些概念性東西，vue中路由的使用規則接着往下走：

(1) 基本案列

(2) 動態路由匹配

某種模式匹配到的全部路由全都映射到同個組件。例如，一個 User 組件，對於全部 ID 各不相同的用戶，都要使用這個組件來渲染。那麼，經過在vue-router 的路由路徑中使用「動態路徑參數」(dynamic segment) 。

const router = new VueRouter({ routes: [ // 動態路徑參數以冒號開頭
    { path: '/user/:id', component: User } ] })
像  和  都將映射到相同的路由
/user/fooID1/user/fooID2

此外能夠經過this.$route.params.id取得用戶的ID值,例如：

/user/:id                       

匹配路徑爲 /user/fooID1時， 此時this.$route.params = {id: 'fooID1'}

/user/:id/name/:name     

匹配路徑爲/user/fooID1/name/yang時， 此時this.$route.params = {id: 'fooID1', name: 'yang'}

 

還有一個經常使用的this.$route.query.id從url中查詢參數，例如：

 /flights/id="foolD1"

 此時this.$route.query.id值爲fooID1