本文將介紹Vue.js中的路由庫vue-router，可實(shí)現(xiàn)單頁面應(yīng)用程序（SPA）中的路由功能。

在使用vue-router前，需要先安裝vue-router庫。你可以通過npm install vue-router 命令進(jìn)行安裝。

npm install vue-router

安裝完成后，我們需要在Vue應(yīng)用程序中引入該庫。

import VueRouter from 'vue-router'
Vue.use(VueRouter);

接下來，我們需要定義路由。在Vue應(yīng)用程序中，路由可以理解為組成應(yīng)用程序的頁面之間的路徑。為了實(shí)現(xiàn)頁面之間的跳轉(zhuǎn)，我們需要定義路由映射表。

const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]

上述代碼中，我們定義了兩個路由映射表，分別為‘/’和‘/about’。每個路由表包含三個屬性，分別為路徑（path）、名稱（name）和組件（component）。其中組件是包含視圖的實(shí)際Vue組件。

我們將這些路由映射表傳遞給VueRouter來創(chuàng)建一個路由實(shí)例。

const router = new VueRouter({
mode: 'history',
routes
})

mode屬性指定應(yīng)用程序的路由模式。在VueRouter中，有兩種路由模式：hash和history。其中hash路由模式使用URL hash（#）來模擬一個完整的URL地址，而history路由模式使用HTML5 History API來獲取真正的URL地址。在Vue.js中，我們通常使用history路由模式。

上述代碼中，我們創(chuàng)建了一個VueRouter實(shí)例并將routes屬性傳遞給它。現(xiàn)在，我們可以將這個實(shí)例傳遞給Vue應(yīng)用程序中。

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

現(xiàn)在，我們已經(jīng)為應(yīng)用程序定義了路由。我們需要使用路由來定義組成應(yīng)用程序的視圖。

路由視圖定義了應(yīng)用程序的主要視圖區(qū)域。它將根據(jù)所選路由組件來動態(tài)更改其內(nèi)容。

接下來，我們需要定義一些導(dǎo)航欄鏈接，讓用戶點(diǎn)擊鏈接來瀏覽我們應(yīng)用程序中的不同路由頁面。

HomeAbout

router-link用于創(chuàng)建導(dǎo)航鏈接。當(dāng)用戶單擊該鏈接時，它會使VueRouter根據(jù)其指定的路由路徑更改應(yīng)用程序視圖。

隨著您越來越熟悉VueRouter，您將學(xué)習(xí)更多高級路由操作，如路由嵌套和動態(tài)路由，以及路由導(dǎo)航鉤子函數(shù)的使用。