Vue.js是一款流行的JavaScript框架，用于構建用戶界面。它允許開發人員使用聲明式語法來描述用戶界面，同時提供了許多有用的功能，例如組件化、數據綁定和路由。其中，路由功能使得我們可以輕松地在不同的頁面之間進行導航。

Vue.js提供了Vue Router插件，專門用于管理頁面之間的路由。這個插件可以很容易地被集成到Vue.js項目中，而且提供了許多有用的功能，例如路由參數、嵌套路由和導航守衛。在這篇文章中，我們將學習如何使用Vue Router來控制路由。

// 導入Vue和Vue Router
import Vue from 'vue'
import VueRouter from 'vue-router'
// 安裝Vue Router插件
Vue.use(VueRouter)
// 定義路由規則
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact },
{ path: '/user/:id', component: User }
]
// 創建Vue Router實例
const router = new VueRouter({
routes
})
// 將路由實例掛載到Vue實例
const app = new Vue({
router
}).$mount('#app')

在上面的代碼中，我們首先導入了Vue.js和Vue Router插件。接著，我們使用Vue.use()方法來安裝Vue Router插件。然后，我們定義了一個數組routes，用于描述我們的路由規則。每一個路由規則都是一個對象，它包含兩個屬性：path和component。其中，path表示路由路徑，component表示對應的組件。例如，我們可以使用{path: '/contact', component: Contact}來定義一個路由，當用戶訪問/contact路徑時，會渲染Contact組件。在我們的例子中，我們還定義了一個/user/:id路由，其中:id表示路由參數。

接下來，我們使用new VueRouter()方法來創建一個Vue Router實例，同時將我們的路由規則傳入。將路由實例掛載到Vue實例中，可以通過$route和$router訪問當前的路由信息和路由對象。例如，我們可以使用$router.push('/about')來進行路由導航。