本小節我們介紹如何在 Vue 項目中使用 VueRouter。包括 VueRouter 的下載、什麽是 VueRouter、如何使用 VueRouter 配置壹個單頁應用。其中，學習使用 VueRouter 配置壹個單頁應用是本節的重點。同學們在學完本節課程之後需要自己多嘗試配置路由。
我們可以在官網 (VueRouter) 上直接下載 VueRouter 。 在 Vue 之後引入 VueRouter 會進行自動安裝：
在壹個模塊化的打包系統中，您必須顯式地通過 Vue.use () 來安裝 Vuex：
在本章節的 VueRouter 學習中，我們都將使用 CDN 的方式引入路由。
用 Vue.js + VueRouter 創建單頁應用，是非常簡單的。使用 Vue.js ，我們已經可以通過組合組件來組成應用程序，當妳要把 VueRouter 添加進來，我們需要做的是，將組件 (components) 映射到路由 (routes)，然後告訴 VueRouter 在哪裏渲染它們。 在使用 VueRouter 之前，我們需要先了解 VueRouter 的兩個內置組件：
接下來我們看壹個基本例子：
實例演示
"運行案例" 可查看在線運行效果
代碼解釋： HTML 代碼第 12-13 行，我們定義了兩個跳轉鏈接； HTML 代碼第 15 行，我們使用 組件來渲染匹配組件； JS 代碼第 5-7 行，我們定義了組件 Index； JS 代碼第 9-11 行，我們定義了組件 Article； JS 代碼第 13-16 行，我們定義了路由數組：
JS 代碼第 18-20 行，創建 router 實例，然後傳 routes 配置。 JS 代碼第 24 行，通過 router 配置參數註入路由。
本節，我們帶大家學習了 VueRouter。主要知識點有以下幾點：