Vue-router 是 Vue.js 的一個插件,它是 Vue.js 官方提供的路由管理器，是構建單頁面應用程序的必備工具。Vue-router 實現了 SPA 單頁應用中的前端路由，為用戶提供了靈活的頁面導航方式。Vue-router 采用了類似 AngularJS 的 UI-Router 的狀態機思想，讓前端路由應用像管理組件一樣簡單。

Vue-router 可以實現前端路由的概念，當 URL 發生變化時，根據 URL 匹配到一個或一組路由，然后對應到方法，這些方法的含義視情況而定。與我們常規的跳轉是不同的，它更像是動態的改變組件數據的過程。

// 路由配置
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
// 創建路由實例
const router = new VueRouter({
routes // (縮寫) 相當于 routes: routes
})
// 創建 Vue 實例
const app = new Vue({
router
}).$mount('#app')

Vue-router 中的路由配置是一個數組，每一項都是一條路由記錄。每個記錄都是由 path 和 component 兩個關鍵字組成的一個對象。其中，path 表示前端路由的 URL 表示。component 表示到這條路由URL時，需要實例化的Vue組件

VueRouter 對象是通過Vue.js插件機制生成的。我們在創建Vue對象之前這樣載入VueRouter：

const router = new VueRouter({
// …
})
const app = new Vue({
router
}).$mount('#app')

VueRouter 如果在實例化的時候傳入一個 routes 配置，則立刻進行路由解析，同時應用第一個可以匹配上的路由，然后將<router-view>顯示在匹配上的 Vue 組件之中。

在一個標準的 Vue 單頁面生命周期中，Vue Router 會首次渲染路由組件時，觸發初始化鉤子，用戶在非內部跳轉時，Vue-router 會調用匹配路由的 updateCallback 函數，新的組件被重新渲染時， beforeRouteLeave 會觸發銷毀前的最后一次鉤子函數。

Vue-router 提供了一系列的組件和指令，在 Vue.js 中使用非常方便。其中最常用的是<router-link>組件，用于實現跳轉鏈接。而<router-view>組件則用于顯示匹配到的組件。除此之外，還有像路由傳參和重定向等功能可以使用。

前端路由做好構建后能為用戶提供靈活的頁面導航方式，降低了請求服務器的次數，提升用戶體驗。VueRouter 的 API 設計簡單易用，甚至連初學者都能通過簡單的學習就可以使用它為項目帶來不錯的效果。