Vue-Router中History模式

目錄

• history路由
• 官方示例
• Express中間件
• 客戶端兜底404

示例代碼託管在：http://www.github.com/dashnowords/blogs

博客園地址：《大史住在大前端》原創博文目錄

華爲雲社區地址：【你要的前端打怪升級指南】

history路由

history模式是指使用HTML5的historyAPI實現客戶端路由的模式，它的典型表現就是去除了hash模式中url路徑中的#。對於前端路由基本原理還不瞭解的讀者能夠看這篇博文【javascript基礎修煉(6)——前端路由的基本原理】。在使用Vue-Router時開啓history模式很是容易，只須要在實例化路由時傳入mode:'history'配置項便可，但缺乏服務端支持時，基於historyAPI的路由沒法從url地址欄直接訪問指定頁面，這個很容易理解，由於url地址欄裏輸入後回車至關於發送了一次GET請求，那麼不帶#的路由路徑就和普通的API接口是同樣的，既然服務端並無定義這樣的接口，那直接訪問時出現404頁面就很正常了。

官方示例

官方提供了不少處理這種場景的方式，以node.js版本的處理方案爲例：

const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

不難看出，它的處理思路就是全部請求都強制重定向到首頁，至關於服務端屏蔽了訪問資源不存在的狀況，而將路由的工做留給客戶端本身去處理，這樣啓用了history模式的前端路由在直接定位到子頁面時就不會報錯了。

Express中間件

express工程中使用connect-history-api-fallback中間件來處理後端路由的場景，它的使用方式很是簡單：

var history = require('connect-history-api-fallback');
var express = require('express');

var app = express();
app.use(history());

源碼也只有120行（地址：connect-history-api-fallback中間件源碼 ），很容易閱讀，基本邏輯是隻將知足一些特定條件的請求進行重定向，也就是將路由請求和API請求區分開，重定向的規則能夠自定義，路由請求的判斷條件包括：

• GET請求
• headers.accept爲text/html或*/*(設置爲application/json或非字符串時會記錄錯誤日誌);

核心邏輯就是82-85行的：

rewriteTarget = options.index || '/index.html';
 logger('Rewriting', req.method, req.url, 'to', rewriteTarget);
 req.url = rewriteTarget;
 next();

也就是若是匹配到自定義的重定向規則就使用自定義場景，不然就使用/index.html做爲默認值，而後重寫req.url屬性，接着進入下一個中間件執行其餘邏輯。

客戶端兜底404

當服務端重定向後，若是沒有進行SSR的同構路由定製，對於全部路由請求都會返回index.html頁面，此時若是須要使用404頁面，就須要在客戶端路由中設定一個優先級最低的兜底路由，因爲優先級的緣故，它不會影響其餘精確匹配的路由配置：

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})