路由（Routing）是指前端頁面之間進行切換和管理的過程。通俗來說，就是根據用戶的操作，切換不同的頁面展示給用戶。在 Vue 中，我們可以使用 Vue Router 進行路由的管理。
首先，在使用 Vue Router 之前，我們需要創建一個 Vue 實例。在這個 Vue 實例中，我們可以先導入 Vue Router、路由所對應的組件以及在路由中對應的 path（路徑）信息。
```
// 導入 Vue Router，需要通過 npm 安裝
import VueRouter from 'vue-router'
// 導入路由所對應的組件
import Home from './components/Home.vue'
import About from './components/About.vue'
// 創建路由
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
// 創建 Vue Router 實例
const router = new VueRouter({
routes
})
```
上面的代碼中，我們首先導入了 Vue Router 并通過 `import` 語句將 `Home` 和 `About` 組件導入。接著，我們需要定義一個路由數組，數組中包含對應的路由信息，比如 `/` 對應 `Home` 組件，`/about` 對應 `About` 組件。最后，創建一個 Vue Router 實例，將路由數組作為參數傳入。
接下來，我們需要將 Vue Router 實例添加到 Vue 實例中。
```
// 創建 Vue 實例
const app = new Vue({
router
}).$mount('#app')
```
上面的代碼中，我們通過 `new Vue()` 創建一個 Vue 實例，將之前創建的 `router` 實例作為參數傳入 `router`，再通過 `$mount()` 方法將 Vue 實例掛載到頁面中。
在頁面中使用路由非常簡單，只需要使用 `` 組件和 `` 組件即可。`` 組件用于路由的跳轉，`` 組件用于展示對應的組件。
```Home About ` 組件定義了兩個路由跳轉鏈接，一個是跳轉到首頁，一個是跳轉到關于頁。接著，使用 `` 組件展示對應的路由信息。
在使用 Vue Router 進行路由管理時，我們還可以定義動態路由、異步路由等。總的來說，Vue Router 的功能非常強大，可以非常方便地進行路由管理。
下一篇vue 路由導航報錯