在Vue應用中，路由器（router）可用于實現單頁應用（SPA）的導航。Vue Router允許您在不加載新頁面的情況下更新瀏覽器的URL，從而使您的應用程序更具交互性。 Vue Router的結構設置非常簡單，可分為以下兩個部分： 1. 定義路由和各自的組件 2. 創建路由實例并將其傳遞給Vue實例 第一步是定義路由。路由是一個對象的集合，它們將路徑（URL）與組件相關聯。下面是一個例子：

const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
]

在上面的代碼中，我們定義了三個路由，分別是路徑為'/'、'/about'和'/contact'的路由。每個路由都與一個組件相關聯，這里我們假設有三個組件：Home、About和Contact。 現在，我們需要將這些路由和它們的相關組件傳遞給Vue Router。為此，我們需要創建一個Vue Router實例，并將該實例傳遞給Vue實例。以下是一個使用Vue Router的例子：

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

在上面的代碼中，我們首先導入Vue和Vue Router。接下來，我們導入所需的組件。然后，我們使用Vue.use()方法注冊Vue Router插件。接下來，我們創建一個路由數組并將其傳遞給Vue Router構造函數。最后，我們創建一個Vue實例并將路由器實例傳遞給它。 現在，我們已經將Vue Router集成到我們的Vue應用程序中。我們還可以使用Vue Router提供的其他功能，例如路由參數、嵌套路由和路由守衛。在此不再詳細討論。