Why does the page refresh appear 404
Because the hash mode in the vue project hash mode is changed to history mode, since the hash value followed by the # number in the url will not be sent to the server as part of the url. In history mode, when the page is refreshed, the browser will directly request the server, and the server does not have this route, so 404 appears.
Then why is the page jump normal? When jumping, it is not actually done by requesting the server, but by changing the address through the js operation history API.
Suggestion: Non-C-end systems can consider using hash mode routing directly, so this problem will not exist.
Node service uses Koa framework
usekoa-connect-history-api-fallbackPlugin to solve
- Installation dependencies
npm install koa-connect-history-api-fallback --save
- How to use (This demonstration is to ignore the development of JavaScript when using TypeScript, directly look at the modified code below)
Imported in the node project filekoa-connect-history-api-fallback
// Note: This reference must be in front of `import koaStatic from 'koa-static';`import history from 'koa-connect-history-api-fallback'; (history());
At this time, you will find an error message from Ts: The module "koa-connect-history-api-fallback" or its corresponding type declaration cannot be found. ts(2307)
You can declare file dependencies by installing the corresponding type of the plug-in@types/koa-connect-history-api-fallbackTo solve it, but after I tried to install it, I found that the type declaration file of the npm server does not exist, so we can introduce the plug-in in the commonJs specification (Because this method imports any type by default）
The modified code is as follows:
const history = require('koa-connect-history-api-fallback');
(history());
Node service uses Express framework
useconnect-history-api-fallbackPlugin to solve
- Installation dependencies
npm install connect-history-api-fallback --save
- How to use
const history = require('connect-history-api-fallback');
(history());The above is the detailed content of the solution to refresh the 404 of vue routing history mode page. For more information about refreshing the 404 of vue history mode page, please follow my other related articles!