昨天有與各位介紹了 Vue Router 與安裝，那今天就來實作看看吧！.

Vue Router 基本配置方式：

• HTML
• JavaScript

接下來我們就分別叫紹他們吧：

JavaScript

我們以下皆使用 Vue CDN 與 Vue Router CDN 當作例子

首先我們需要先定義頁面的 Vue 元件：

const About ={ template: 
  `<div>
    <h1>iThome</h1>
    <p>example</p>
  </div>`
}

接下來，我們要定義路徑與前面 Vue 元件的關係
可以使用陣列，去定義路徑與前面元件的關係，而當我們定義時，每個 route 物件可以有三組 key、value 值。包括 name、path 與 component。name 為路由的名稱，可以使用名稱指定路由。path 為 URL 位置。component 為當到達指定 URL 時，需要對應的元件。

iThome_vueRouter = [{name: 'About', path: '/about', component:About}]

第三步，我們就要來初始化並建立 Vue Router 實例
直接建立一個 router 實例。並且將剛才定義的陣列加入此物件裡。

const router = new VueRouter({
  routes
})

那除了將陣列加入實例外，我們也可以加上其他的 options。

最後的步驟，我們要將將 Vue Router實例添加入 Vue 實例中

最後跟各位總結一下步驟：

1. 定義個頁面的Vue元件
2. 定義路徑與前面Vue元件的關係
3. 初始化並建立Vue Router物件
4. 將Vue Router物件添加入Vue實例中

HTML

要使用 vue-Router 就需要以下兩標籤：

• <router-link>：用來指定路徑。
• <router-view>：用來顯示內容。

我們可以在網頁中加入 <router-view> 當 Route 的進入點，接者使用 <router-link>來產生對應的連結。而 router-link 可以使用 to 屬性去處理目標的 URL，再經過編譯後，會變成 <a> 標籤，router-view 則是可以用來渲染內容。

<router-link to="/about" class="link">iThome</router-link>

to 除了可以直接指定 route 路徑外，也能指定 route 的名稱

<router-link :to="{name:'About'}" class="link">iThome</router-link>

當我們使用 route 的名稱時，to 就需要採用 v-bind 的方式。
都設定完後，當使用者點選 <router-link> 後，就可以透過路由將對應的結果顯示於 <router-view> 的地方。

好的，那我們今日對於 Vue-Router 的介紹就到此結束ㄌ
謝謝各位的觀看 ~