Vue Router 是 Vue.js 官方的路由管理器。它與 Vue.js 核心深度集成，讓構建單頁面應用變得輕而易舉。使用 Vue Router，我們可以很方便地實現頁面間的跳轉、參數傳遞、嵌套路由等功能。下面就讓我們來學習一下 Vue Router 的路由啟動。

在使用 Vue Router 之前，我們需要通過 npm 安裝 vue-router。我們可以在命令行執行以下命令：

npm install vue-router --save

安裝完成后，我們可以在項目的 main.js 文件里面引入 Vue Router 并啟用該插件。具體代碼如下：

// 引入 Vue Router
import VueRouter from 'vue-router';
// 啟用 Vue Router
Vue.use(VueRouter);

在啟用 Vue Router 之后，我們需要定義路由的映射關系。這些映射關系定義了 URL 和組件之間的對應關系。在 Vue Router 中，我們可以使用以下幾種方式定義映射關系：

1. 使用 Vue.extend() 聲明組件并使用 router.map() 定義映射關系。

2. 使用路由器實例的 router.map() 定義映射關系。

3. 直接傳遞一個 routes 配置數組。

在這里，我們選擇第三種方式，定義一個 routes 數組來存儲映射關系。具體代碼如下：

// 定義映射關系
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
];
// 實例化 Vue Router 路由器
const router = new VueRouter({
routes
});

在上面的代碼中，我們定義了兩個根路徑為 / 和 /about 的映射關系。這里的 Home 和 About 是組件。

在定義好映射關系后，我們需要在 Vue 實例中啟用該路由器。具體代碼如下：

new Vue({
router,
render: h =>h(App)
}).$mount('#app')

在這段代碼中，我們將路由器實例 router 作為 Vue 實例的一個屬性，然后在渲染函數中使用 App 組件。

啟動完成后，我們可以通過 router-link 組件來實現頁面之間的跳轉。該組件會自動將 URL 和路由映射關系建立起來。具體代碼如下：

HomeAbout

在使用 router-link 組件時，我們可以直接傳遞一個字符串，表示要跳轉到的路徑。Vue Router 會自動將該字符串解析為對應的路由對象。

通過以上的學習，我們已經可以使用 Vue Router 來實現單頁面應用的路由功能了。在實際開發中，我們還可以使用路由鉤子函數、路由傳參、路由跳轉等功能來增強應用的交互性和可擴展性。