Vue路由一：簡單路由

Vue中的路由一般指的是 vue-router 庫

1. 什麼是路由：

可以看一下：

可以看到 首先是訪問路由器，我們對目的地址主機的訪問並不是之間訪問到主機，而是訪問的是路由，通過路由來分配。路由器根據你的請求，從路由表中查詢出對應的地址進行定向與轉發，將請求分配給目的地址。

例如 我們請求主機A：

從入口發送請求主機A 請求 ——> 路由接到請求,從路由表中查詢到 請求對應的目的地址為 主機A ——> 轉發請求到主機A ——> 我們訪問到主機A。

由此可以看出來，路由是什麼：

1. 路由是請求的入口，是程序的入口。也是出口。
2. 路由是源地址轉發到目的地址的過程。
3. 路由是源地址與目的地址之間分配與決策的過程。

Vue中的路由 也是一樣的道理：

我們把入口 簡單的定義為鼠標，導航欄為路由，目的地址為 頁面A,B,C

1. 通過鼠標點擊導航欄中頁面A的導航（產生請求，源地址），導航欄（路由）查找路由表獲得對應的頁面A地址（源地址與目的地址之間的分配與決策），顯示頁面A（定向並轉發）。

源地址 ——> 路由 ——> 目的地址

看下 Vue 中的 簡單路由：

借用一下 Vue官方教程中的例子，官方例子是用ES2015實現的，我對ES2015不怎麼熟悉，改寫成 js5的形式。

路由連接組件，

通過來實現簡單的路由。會被渲染成

頁面A

:to 與 to 區別是

1. :to 其實是 v-bind:to的縮寫 綁定的是動態值，可以是變量。
2. to 綁定的是 靜態值，只能是字符串字面值，不能是變量。

Vue中所有v-bind:xxx 形式綁定的值 都是動態值。

當 對應的路由匹配成功，將自動給渲染後的

為了更直觀一些，給 router-link-active設置一個樣式，router-link-active設置成功後，設置

路由視圖組件

通過路由進行定向並轉發到的目的地址（在這裡是vue組件）,將替換組件為目的組件。也就是說 組件並不顯示任何內容，其實就是一個佔位標記，

例如：

我們通過路由選中的目的組件是 頁面A組件,那麼 組件 將被替換為 組件.

1. 引入 Vue.js 和 vue-router.js庫，vue-router.js就是vue的路由庫。
2. 註冊倆個組件 Foo, Bar 。分別表示目的組件 頁面A， 頁面B。
3. routes 是路由映射表，路由從路由映射表裡面查找對應的目的組件。

path 的值 就是