---
# System prepended metadata

title: Different History modes
tags: [Mike課程]

---

---
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底下改寫

```javascript=
import { createWebHashHistory } from 'vue-router'
```

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

```

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

![](https://i.imgur.com/wwAvVYO.png)



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

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

### 404頁面處理

* 載入404頁面

```javascript=
import NotFoundComponent from '../views/NotFoundComponent.vue'
```
* 處理404路由

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