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

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。接著創建一個VueRouter實例，將路由配置傳遞給它。路由配置中包含了routes字段，我們在里面定義了兩個路由，一個是/home，一個是/about，分別對應Home和About組件。

HomeAbout

在模板中使用router-link標簽，它會被渲染成一個鏈接，點擊這個鏈接會跳轉到對應的路由地址。to屬性就是用來指定路由地址的。

router-view是一個占位符組件，在匹配到路由時，它會加載對應的組件，并顯示在這個位置。在上面的路由配置中，我們定義了兩個路由，分別對應Home和About組件。當我們訪問/home時，會加載Home組件并在router-view位置顯示。

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

在這個路由配置中，我們定義了一個/user/:id的路由，:id表示這個路由參數是動態的。我們在User組件中通過this.$route.params.id可以獲取到這個路由參數。

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

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

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

最后，我們還可以定義一個404頁面，當用戶訪問的路由不存在時，會自動跳轉到這個頁面。