vue-router 基本使用

路由，其實就是指向的意思，當我點選頁面上的home按鈕時，頁面中就要顯示home的内容，如果點選頁面上的about 按鈕，頁面中就要顯示about 的内容。Home按鈕  => home 内容， about按鈕 => about 内容，也可以說是一種映射. 是以在頁面上有兩個部分，一個是點選部分，一個是點選之後，顯示内容的部分。 

　　點選之後，怎麼做到正确的對應，比如，我點選home 按鈕，頁面中怎麼就正好能顯示home的内容。這就要在js 檔案中配置路由。

　　路由中有三個基本的概念 route, routes, router。

　　　　1， route，它是一條路由，由這個英文單詞也可以看出來，它是單數， Home按鈕  => home内容， 這是一條route,  about按鈕 => about 内容， 這是另一條路由。

　　　　2， routes 是一組路由，把上面的每一條路由組合起來，形成一個數組。[{home 按鈕 =>home内容 }， { about按鈕 => about 内容}]

　　　　3， router 是一個機制，相當于一個管理者，它來管理路由。因為routes 隻是定義了一組路由，它放在哪裡是靜止的，當真正來了請求，怎麼辦？ 就是當使用者點選home 按鈕的時候，怎麼辦？這時router 就起作用了，它到routes 中去查找，去找到對應的 home 内容，是以頁面中就顯示了 home 内容。

　　　　4，用戶端中的路由，實際上就是dom 元素的顯示和隐藏。當頁面中顯示home 内容的時候，about 中的内容全部隐藏，反之也是一樣。用戶端路由有兩種實作方式：基于hash 和基于html5 history api.

　　vue-router中的路由也是基于上面的内容來實作的

　　在vue中實作路由還是相對簡單的。因為我們頁面中所有内容都是元件化的，我們隻要把路徑群組件對應起來就可以了，然後在頁面中把元件渲染出來。

　　1， 頁面實作（html模版中）

　　　　在vue-router中, 我們看到它定義了兩個标簽<router-link> 和<router-view>來對應點選和顯示部分。<router-link> 就是定義頁面中點選的部分，<router-view> 定義顯示部分，就是點選後，區配的内容顯示在什麼地方。是以 <router-link> 還有一個非常重要的屬性 to，定義點選之後，要到哪裡去， 如：<router-link  to="/home">Home</router-link>

　　2， js 中配置路由

　　　　首先要定義route,  一條路由的實作。它是一個對象，由兩個部分組成： path和component.  path 指路徑，component 指的是元件。如：{path:’/home’, component: home}

動态路由

　　上面我們定義的路由，都是嚴格比對的，隻有router-link 中的to屬性和 js 中一條路由route中 path 一模一樣，才能顯示相應的元件component. 但有時現實卻不是這樣的，當我們去通路網站并登入成功後，它會顯示 歡迎你，+ 你的名字。不同的使用者登入， 隻是顯示“你的名字” 部分不同，其它部分是一樣的。這就表示，它是一個元件，假設是user元件。不同的使用者（就是使用者的id不同），它都會導航到同一個user  元件中。這樣我們在配置路由的時候，就不能寫死, 就是路由中的path屬性，不能寫死，那要怎麼設定? 導航到 user 元件，路徑中肯定有user, id 不同，那就給路徑一個動态部分來比對不同的id.  在vue-router中，動态部分 以 : 開頭，那麼路徑就變成了 /user/:id, 這條路由就可以這麼寫：  { path:"/user/:id", component: user }.