Some days ago, when I made a SPA web page opened in wechat, I encountered the problem of hash truncation, so the history mode was adopted for the front-end routing, which was perfectly solved with the cooperation of the backend colleagues. After that, MY feelings for Hash were not as strong as before, and I began to use the History mode a lot.


Just recently, the integration of a backend project is SPA (backend management system). Because it is a personal project, the required background interface and data are also built by themselves with Node.js Koa. This leads to back-end configuration issues when the SPA uses history mode. Vue is used in the front end of this project, and vue-Router is naturally used for routing. About the history of the Vue – the Router mode backend configuration example, website provides several different back-end language example: HTML 5 history model | Vue Router


Node.js is all about native Node.js and an Express middleware. Because Koa is used in the back end of this project, I found several related packages in NPM, but the results were not ideal, so I simply implemented one by myself, which is actually very simple: Routing in the back-end to receive ‘/ adminVueElement’ and ‘/ adminVueElement/tools/download – excel’ and all begin with ‘/ adminVueElement Get request, All must be returned in an HTML file, not 404.

Because it’s Koa. A lot of middleware will inevitably be used. For example, the back-end of this project: 


app.use(cors()); // Allow cross-domain
app.use(body({ multipart: true })) // Get the POST request body middleware
app.use(static(". /")); // Static file middleware
app.use(compress({ threshold: 2048 })); / / gzip middlewareCopy the code
The front-end code for this project is packaged and I put it in the ‘adminVueElement’ folder in the root directory. Because of the koa-static middle, when accessing ‘/adminVueElement’, koa-static automatically goes to the adminVueElement folder and finds index.html and returns it to the browser. However, when we visit ‘/ adminVueElement/tools/download – excel, will return to 404. Because there is no tools folder in the ‘adminVueElement’ folder, we need to do a little bit of judgment on our own and do something about the koa-static result.


According to the principle of first in last out of KOA middleware. We need to implement our own middleware in front of koa-static. When koA-static is finished, check what is returned. If we find that 404 is returned and the URL also contains ‘/adminVueElement’, we cancel the 404 return and return the specified HTML.

It’s a bit convoluted, but let’s go to the code: 


app.use(cors()); App. use(body({multipart:trueUse (async (CTX, next) => {//historyMiddleware const path ='/adminVueElement/'// Wait for the request to completeif(ctx.response.status === 404 && ctx.request.url.includes(path)) {// Check whether the ctx.type = condition is met'text/html; charset=utf-8'// Modify the response type ctx.body= fs.readfilesync ('. ' + path + 'index.html'}}) app.use(static()". /")); // Static file middleware app.use(compress({threshold: 2048})); / / gzip middlewareCopy the code


Thus, a simple KOA History middleware is implemented.