Vue-Router 是 Vue.js 官方的路由插件，它與 Vue.js 的核心深度集成，讓構建單頁面應用變得輕而易舉。Vue-Router 是基于瀏覽器的地址（URL）和（或）瀏覽器的歷史記錄驅動的。如果你熟悉 AngularJS 1.x 的話，那么可以把 Vue-Router 和 ui-router 的作用進行對比。Vue-Router 讓所有 Vue.js 應用都擁有路由功能。

Vue-Router 簡單易用，但是有很強的擴展性?；镜暮诵墓δ馨ǎ?/p>

// 0. 容器，包含整個應用
var container = new Vue({
el: '#app',
// 1. 路由對象，定義 URL 路由規則
router: new VueRouter({
routes: [
// 2. 嵌套的路由配置
{
path: '/home',
component: Home,
children: [
// 3. 嵌套的子路由
{
// 當 /home/profile 匹配成功，
// Profile 會被渲染在 Home 的中
path: 'profile',
component: Profile
},
{
// 當 /home/posts 匹配成功
// Posts 會被渲染在 Home 的中
path: 'posts',
component: Posts
}
]
},
{
path: '/about',
component: About
}
]
})
})

這是使用 Vue-Router 的基本代碼結構。在上面的例子中，你可以看到 Vue-Router 的三個主要的配置：創建路由對象、定義 URL 路由規格，和嵌套的路由配置。這三個配置是使用 Vue.js 模塊化開發的基礎，我們后面的文章將會深入講解。

在上面的代碼中，有兩個主要的組件：Home 和 About，它們都是演示如何定義一個基本的組件并實現它們的路由。Home 組件是事實上的父組件，它由兩個嵌套的子路由：Profile 和 Posts 組成。下面是這兩個組件的代碼：

// 定義組件
var Home = Vue.extend({
template: '<div class="home"><h1>Home</h1><!-- 嵌套的子路由出口 --><router-view></router-view></div>'
})
var About = Vue.extend({
template: '<div class="about"><h1>About</h1><p>This is the about page</p></div>'
})
var Profile = Vue.extend({
template: '<div class="profile"><p>Welcome to your profile page</p></div>'
})
var Posts = Vue.extend({
template: '<div class="posts"><p>These are your posts</p></div>'
})

了解了這些基礎后，我們就可以開始構建更強大的單頁面應用了。在接下來的文章中，我們會探索 Vue-Router 的更多功能。