Vue Router 可以讓我們在使用 Vue.js 構建大型應用時更容易變成 SPA （Single-Page Application）。

// 安裝并引入 Vue Router
npm install vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router

在上例中，我們創建了兩個路由，'/' 和 '/about'。它們分別指向組件 Home 和 About。我們還設置了 mode 為 'history'，這將刪除瀏覽器中 URL 的 hash 前綴 '#/'。

下一步是用<router-link>創建一個鏈接，它會根據路由配置自動解析為正確的路徑。一個非常基本的例子是：

HomeAbout

我們還可以將 url 傳遞給其它組件：

// 帶參數的路由
{ path: '/user/:id', component: User }
// 或者通過 props 傳遞
const User = {
props: ['id'],
template: '
User {{ id }}
'
}
// 在組件中使用
this.$router.push({ path: '/user/' + userId })
// 或者
this.$router.push({ props: { id: userId }})

在路由被激活后可以提供給組件的一些信息可以通過props傳遞，而不是從路由params中獲取。

如果我們需要從組件調用路由方法，則可以使用$router對象，例如：$router.push('/about')。

// 抶況值

最后，<router-view>標簽是最后一個必須被添加的東西。路由匹配到的組件將渲染在這里。