# Vue hash mode URL含有#問題

vue-router 預設會有"#"在url上,
但可以改變vue-router模式
為**history mode**

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

便可以消除url中含有"#"的問題,

但使用history mode的問題會是,
當使用者在頁面中重新整理之後 會報錯跑出404,
因為此時 的重新整理代表著真的對目標網址發出一個request,
而不是前端路由在操控了,
這不會是我們想看到的所以

### 方式1
在伺服器中設定相匹配的路由並全部回傳index.html
回傳給前端後,再交由前端路由去顯示正確的頁面

例如:
在node express 環境中我搭建一個簡單伺服器
假設我目前,前端路由只有三條,分別是:
' / '
' /product '
' /about '

const express = require('express')
const app = express()
const port = 3000
const path = require('path')
let indexHTMLPath = path.join(__dirname, 'public', 'index.html')

app.use(express.static('public'))
app.get('/', (req, res) => {
    res.sendFile(indexHTMLPath)
})
app.get('/product', (req, res) => {
    res.sendFile(indexHTMLPath)
})
app.get('/about', (req, res) => {
    res.sendFile(indexHTMLPath)
})
app.listen(port, () => console.log(`app listening on port ${port}`))

所以當使用者在這三個頁面刷新(F5)時,就會對這些路由發出請求,
此時伺服器就會回傳index.html這隻檔案給前端後,
就會交由vue-router接管,
便可以解決刷新後會出現404的錯誤.

### 結論
此解決方案需要一個伺服器與前端配合設定相同的route,
當伺服器接收到請求時回傳同一隻index.html

==[官方文件](https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90)==

### 方式2

我自己起一個server