---
tags: Mike課程
---

# Different History modes

官網參考 https://next.router.vuejs.org/guide/essentials/history-mode.html#netlify

* 我們在npm run build 到靜態網頁中時，會有路由/index.html 這個問題導致無法正常運行、我們可以以下方式解決。

### createWebHashHistory()
* 會透過 # 字號來當作網址切換的操作，但是會跟錨點相撞，對SEO有不利的影響
> index.js底下改寫

import { createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

* 但網址就會造成一個# 在這邊


### createWebHistory()
* 需要跟後端搭配重新配置根目錄下的router，還要自己配置例外處理的頁面例如404等

各後端配置方式 : https://next.router.vuejs.org/guide/essentials/history-mode.html#hash-mode

### 404頁面處理

* 載入404頁面

import NotFoundComponent from '../views/NotFoundComponent.vue'

* 處理404路由

  { path: '/:pathMatch(.*)', component: NotFoundComponent }