Vue-router 是 Vue.js 中一個官方的路由管理器。它與 Vue.js 核心深度集成，讓構建單頁面應用變得易如反掌。Vue-router 會以組件的形式映射到不同的 URL，可以讓我們構建具有復雜交互邏輯的應用程序。

在 Vue.js 中使用 Vue-router 主要涉及到以下幾步：

• 安裝 Vue-router
• 定義路由
• 注冊路由
• 創建路由實例

下面將分別對這幾個步驟進行詳細介紹。

安裝 Vue-router

npm install vue-router

在安裝完成后，需要在項目中引入 Vue-router：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

定義路由

路由定義需要在應用程序中創建一個新文件夾，在文件夾中創建一個 index.js 文件。在該文件中，需要定義每個組件對應的路由：

import HelloWorld from '@/components/HelloWorld'
import About from '@/components/About'
export default [
{
path: '/',
component: HelloWorld
},
{
path: '/about',
component: About
}
]

在上面的代碼中，我們通過 ES6 的模塊導出定義了兩個路由信息，每個路由信息都包含一個 path 和一個 component 屬性。路徑 path 匹配的 URL 時，將會渲染出 component 組件。

注冊路由

我們需要將路由信息注冊到 Vue 實例中：

const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})

在上面的代碼中，我們創建了一個新的路由實例，并在其中指定了 App.vue 組件作為默認顯示組件，以及定義了路由規則。

創建路由實例

在最后一步中，我們需要將路由實例添加到根 Vue 實例中：

new Vue({
router,
render: h =>h(App),
}).$mount('#app')

在上面的代碼中，我們將路由實例 router 通過配置項添加到根 Vue 實例中，從而實現路由功能。

在 Vue-router 中，還有很多高級用法，例如路由傳參、路由守衛、異步組件等，通過上述簡單的介紹，您已經可以快速上手 Vue-router，并在實際開發中使用到這些高級功能。