history路由模式與hash路由模式的差別

history路由模式與hash路由模式兩種單頁應用的路由模式 差別

hash模式

hash模式 ：使用 URL 的 hash 來模拟一個完整的 URL, 其顯示的網絡路徑中會有 “#” 号

hash 雖然出現URL中，但不會被包含在HTTP請求中，對後端完全沒有影響，是以改變hash後重新整理, 也不會有問題

hash模式示例: http://localhost:8080/#/home http://localhost:8080/#/user

原理： hashChange

history模式

history模式： 美化後的hash模式，路徑中不包含“#”。依賴于Html5 的

history api

由于改變了位址, 重新整理時會按照修改後的位址請求後端, 需要後端配置處理, 将位址通路做映射, 否則會404

history模式示例: http://localhost:8080/home http://localhost:8080/user

原理： popState, pushState()

vue項目修改路由模式

修改路由模式從hash轉變為history模式

開發到現在，我們一直都在用hash模式，打包我們嘗試用history模式

改成history模式非常簡單，隻需要将路由的mode類型改成history即可。在

src/router/index.js

中

// 建立路由執行個體
const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  // 指定路由規則
  routes: [
    ...constantRoutes // 靜态路由, 首頁
  ]
})
           

配置好之後，我們通路路徑不再需要加#号同樣運作正常，這是因為 webpack 預設配好了對于 history 模式的處理

在nodejs環境中布署應用-解決history

問題

将history模式下打包的代碼放置伺服器運作，出錯:浏覽器一重新整理就會出現頁面丢失的問題

原因

首次運作

再次重新整理

、

為什麼hash模式重新整理不報錯

### 解決history頁面通路問題

安裝 koa中間件

注冊中間件

const Koa  = require('koa')
const serve = require('koa-static');
const { historyApiFallback } = require('koa2-connect-history-api-fallback');
const app = new Koa();
// 這句話 的意思是除接口之外所有的請求都發送給了 index.html
app.use(historyApiFallback({ 
  whiteList: ['/api']
}));  // 這裡的whiteList是 白名單的意思

app.use(serve(__dirname + "/public")); //将public下的代碼靜态化

app.listen(3333, () => {
  console.log('項目啟動')
})
           

此時解決了重新整理 404 的問題 (注意: 如果點了登入, 記得清除cookies 再測試)