Vue是一個輕量級的JavaScript框架，可以用于構建單頁面應用程序。其中一個重要的組成部分是Vue路由器。Vue路由器允許您在應用程序中創建多個頁面，并且使得切換頁面變得非常簡單。

為了使用Vue路由器，您需要首先安裝它。可以使用npm安裝它：

npm install vue-router --save

一旦您安裝了Vue路由器，您就可以開始在應用程序中創建頁面。對于每個頁面，您需要創建一個Vue組件。以下是一個簡單的組件，它將渲染一個簡單的頁面：

const HomePage = {
template: `
Home Page
Welcome to the home page!
`
}

在Vue組件中，模板屬性描繪了組件所在的 HTML 元素，在這里我們使用標準的div元素。

為了將該組件添加到應用程序中，我們需要告訴Vue路由器應該如何響應某個網址。

假設我們有一個網站，其中主頁位于“/”處。我們可以使用以下代碼來將HomePage組件與該位置關聯：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: HomePage }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')

這段代碼將HomePage組件添加到主頁中。當用戶訪問該網站時，應用程序將自動導航到這個主頁。

我們還可以添加其他頁面和組件。例如，如果我們希望創建一個關于頁面，我們可以創建一個AboutPage組件，并將其添加到路由器中：

const AboutPage = {
template: `
About Page
This is the about page.
`
}
const routes = [
{ path: '/', component: HomePage },
{ path: '/about', component: AboutPage }
]

現在，我們可以使用 “/ about”這樣的網址來導航到關于頁面。

在Vue路由器中，還可以使用路由參數和嵌套路由。無論您需要什么樣的用戶界面跳轉，Vue路由器都提供了豐富的選項來創建靈活的單頁面應用程序。