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

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

//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