如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)

下面是完整攻略。

什么是H5 History模式？

H5 History模式是HTML5中新增的History API。它通过更改浏览器地址栏的URL来实现页面不刷新的页面跳转效果。在使用H5 History API时，需要在Nodejs中配置路由规则来支持。一般来说，当你在单页应用中进行跳转时，H5 History模式都是被默认启用的。

解决方案

若要让Nodejs支持H5 History模式，只需使用一个连接中间件（connect）和一个工具库（connect-history-api-fallback）即可。

1. 安装connect和connect-history-api-fallback

npm install --save connect connect-history-api-fallback

1. 使用connect和connect-history-api-fallback中间件

const connect = require('connect');
const history = require('connect-history-api-fallback');
const app = connect();
app.use(history());
app.listen(3000);

通过上面的代码，你可以在Nodejs中使用connect和connect-history-api-fallback中间件，从而让Nodejs支持H5 History模式。当浏览器路由跳转时，connect-history-api-fallback会拦截路由请求，并将它们重定向到制定的SPA应用程序中，就可以实现不刷新浏览器的跳转效果。

connect-history-api-fallback具体实现细节是： 每当浏览器发送请求时，connect-history-api-fallback都会查看这个请求所对应的文件是否存在，如果存在则返回对应文件，如果不存在则返回默认SPA页面。

1. 配置connect-history-api-fallback中间件

connect-history-api-fallback提供了一些配置项来控制中间件的行为。当发现请求文件不存在时，它会尝试使用index属性中定义的文件名进行返回，如果该文件还是不存在，则会返回fallback属性中的文件。

const connect = require('connect');
const history = require('connect-history-api-fallback');
const app = connect();
app.use(history({
  index: '/index.html',
  rewrites: [
    { from: /^\/login/, to: '/login.html'},
    { from: /^\/register/, to: '/register.html'},
  ],
  logger: console.log.bind(console),
}));
app.listen(3000);

上面的代码给出了几个配置项：

• index：定义用于重定向的默认文件名。
• rewrites：定义URL重写规则，可以将特定URL重写为另一个URL，例如将/login重写为/login.html。

• logger：定义日志函数，用于记录重定向等操作。

• 几个示例说明

示例一

const connect = require('connect');
const history = require('connect-history-api-fallback');
const app = connect();
app.use(history({ index: '/index.html' }));
app.listen(3000);

假设你的web应用程序包含以下文件: index.html、about.html、contact.html和js/app.js。

当你访问http://localhost:3000/时，会默认访问index.html页面。 如果你通过单击链接或通过编程跳转到/about.html页面，您的浏览器将向/connect-history-api-fallback中间件发出请求。 如果/connect-history-api-fallback中间件发现/about.html文件存在，则它将返回该文件。 如果/connect-history-api-fallback中间件发现/about.html文件不存在，则它将重定向到/index.html页面，并返回index.html。

示例二

const connect = require('connect');
const history = require('connect-history-api-fallback');
const app = connect();
app.use(history({
  rewrites: [
    { from: '/pages/about', to: '/about.html' },
    { from: '/pages/contact', to: '/contact.html' },
  ]}));
app.listen(3000);

假设你的web应用程序包含以下路由规则：/pages/about、/pages/contact、/pages/home和/js/app.js。

当你通过单击/ pages / about链接或通过编程访问该页面时，Your Browser将向/connect-history-api-fallback中间件发出请求。 如果/connect-history-api-fallback中间件匹配到了关于这张图片，则会将其重定向到/ about.html，并通过浏览器返回您的关于/about.html。 如果/connect-history-api-fallback中间件无法找到重定向“from”中指定的URL，则会继续在您的web应用程序中尝试寻找文件，或者将其重定向到/ index.html。