当你使用 history 模式时，URL 就像正常的 url，例如 http://xxx.com/user/id。

想要完美支持这种模式，还需要后台配置支持。当应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://xxx.com/user/id 就会返回 404。

后端支持案例：

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
  try_files $uri $uri/ /index.html;
}

Node.js (Express)

如果是Express 可以使用connect-history-api-fallback [https://github.com/bripkens/connect-history-api-fallback]()

Egg.js

// app/middleware/history_fallback.js
module.exports = () => {
  return async function historyFallback(ctx, next) {
    await next();
    if (ctx.status === 404 && !ctx.body) {
      if (ctx.acceptJSON) {
        ctx.body = { error: 'Not Found' };
      } else {
        ctx.render('index')
      }
    }
  };
};

// config/config.default.js
module.exports = {
  middleware: [ 'historyFallback' ],
};

微信公众号

本文链接：