Vue-Router是Vue.js官方提供的路由管理插件，它可以幫助我們快速、簡單地實(shí)現(xiàn)前端路由的功能。除此之外，Vue-Router還提供了很多特性，比如組件加載、嵌套路由、路由參數(shù)等。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
}
]
})

在上面的代碼中，我們首先引入Vue和VueRouter，然后通過Vue.use()來安裝VueRouter。接著創(chuàng)建一個(gè)VueRouter實(shí)例，將路由配置傳遞給它。路由配置中包含了routes字段，我們在里面定義了兩個(gè)路由，一個(gè)是/home，一個(gè)是/about，分別對應(yīng)Home和About組件。

HomeAbout

在模板中使用router-link標(biāo)簽，它會(huì)被渲染成一個(gè)鏈接，點(diǎn)擊這個(gè)鏈接會(huì)跳轉(zhuǎn)到對應(yīng)的路由地址。to屬性就是用來指定路由地址的。

router-view是一個(gè)占位符組件，在匹配到路由時(shí)，它會(huì)加載對應(yīng)的組件，并顯示在這個(gè)位置。在上面的路由配置中，我們定義了兩個(gè)路由，分別對應(yīng)Home和About組件。當(dāng)我們訪問/home時(shí)，會(huì)加載Home組件并在router-view位置顯示。

const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User
}
]
})

在這個(gè)路由配置中，我們定義了一個(gè)/user/:id的路由，:id表示這個(gè)路由參數(shù)是動(dòng)態(tài)的。我們在User組件中通過this.$route.params.id可以獲取到這個(gè)路由參數(shù)。

const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})

Vue-Router還支持嵌套路由。在上面的路由配置中，我們在/user/:id路由下定義了兩個(gè)子路由，分別對應(yīng)UserProfile和UserPosts組件。當(dāng)我們訪問/user/1/profile時(shí)，會(huì)先加載User組件，再在User組件的位置加載UserProfile組件。

const router = new VueRouter({
routes: [
{
path: '*',
component: NotFound
}
]
})

最后，我們還可以定義一個(gè)404頁面，當(dāng)用戶訪問的路由不存在時(shí)，會(huì)自動(dòng)跳轉(zhuǎn)到這個(gè)頁面。