Vue-router 是 Vue.js 的一個(gè)插件,它是 Vue.js 官方提供的路由管理器，是構(gòu)建單頁面應(yīng)用程序的必備工具。Vue-router 實(shí)現(xiàn)了 SPA 單頁應(yīng)用中的前端路由，為用戶提供了靈活的頁面導(dǎo)航方式。Vue-router 采用了類似 AngularJS 的 UI-Router 的狀態(tài)機(jī)思想，讓前端路由應(yīng)用像管理組件一樣簡單。

Vue-router 可以實(shí)現(xiàn)前端路由的概念，當(dāng) URL 發(fā)生變化時(shí)，根據(jù) URL 匹配到一個(gè)或一組路由，然后對(duì)應(yīng)到方法，這些方法的含義視情況而定。與我們常規(guī)的跳轉(zhuǎn)是不同的，它更像是動(dòng)態(tài)的改變組件數(shù)據(jù)的過程。

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

Vue-router 中的路由配置是一個(gè)數(shù)組，每一項(xiàng)都是一條路由記錄。每個(gè)記錄都是由 path 和 component 兩個(gè)關(guān)鍵字組成的一個(gè)對(duì)象。其中，path 表示前端路由的 URL 表示。component 表示到這條路由URL時(shí)，需要實(shí)例化的Vue組件

VueRouter 對(duì)象是通過Vue.js插件機(jī)制生成的。我們?cè)趧?chuàng)建Vue對(duì)象之前這樣載入VueRouter：

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

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

在一個(gè)標(biāo)準(zhǔn)的 Vue 單頁面生命周期中，Vue Router 會(huì)首次渲染路由組件時(shí)，觸發(fā)初始化鉤子，用戶在非內(nèi)部跳轉(zhuǎn)時(shí)，Vue-router 會(huì)調(diào)用匹配路由的 updateCallback 函數(shù)，新的組件被重新渲染時(shí)， beforeRouteLeave 會(huì)觸發(fā)銷毀前的最后一次鉤子函數(shù)。

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

前端路由做好構(gòu)建后能為用戶提供靈活的頁面導(dǎo)航方式，降低了請(qǐng)求服務(wù)器的次數(shù)，提升用戶體驗(yàn)。VueRouter 的 API 設(shè)計(jì)簡單易用，甚至連初學(xué)者都能通過簡單的學(xué)習(xí)就可以使用它為項(xiàng)目帶來不錯(cuò)的效果。