---
# System prepended metadata

title: Vue Route
tags: [Vue]

---

# Vue Route 
###### tags: `Vue`

Vue Router 是 Vue.js 的官方路由。它與 Vue.js 核心深度集成，讓用 Vue.js構建單頁應用(SPA)變得容易。
功能包括
* 嵌套路由映射 
* 動態路由選擇 
* 模塊化、基於組件的路由配置 
* 路由參數、查詢、通配符 
* 展示由 Vue.js 的過渡系統提供的過渡效果 
* 細緻的導航控制 
* 自動激活 CSS 類的鏈接 
* HTML5 history 模式或 hash 模式 
* 可定制的滾動行為 
* URL 的正確編碼

## 安裝及設定

:::info
npm install vue-router@next
:::
新增 router/index.js
``` javascript=
//router/index.js

import { createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
import Home from '../App.vue'

// 創建一個 routes 陣列，定義所有 route 路徑
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]


// 創建一個router，
const router = createRouter({
  history: createWebHashHistory(), // 這邊我使用 # 路徑模式
  routes // 導入使用上方 routes 所定義的路徑
})

  
// 將 router 物件導出成一個 module
export default router
```