vue路由history模式页面刷新404解决方法Koa Express

目录

• 为什页面刷新会出现404
• Node服务使用Koa框架
• Node服务使用Express框架

为什页面刷新会出现404

因为vue项目中路由hash模式改为了history模式，由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器，而history模式下当刷新页面之后浏览器会直接去请求服务器，而服务器没有这个路由，于是就出现404。

那为什么页面跳转就是正常的？跳转时其实不是通过请求服务器的，而是通过js操作history的API改变地址完成的。

建议：非C端系统可以考虑直接使用hash模式路由，就不会存在此问题了

Node服务使用Koa框架

使用koa-connect-history-api-fallback插件来解决

• 安装依赖

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

• 使用方法（此演示是使用TypeScript的情况下，用JavaScript开发的忽略直接看下面修改后的代码）

在node项目中的 app.ts 文件中引入koa-connect-history-api-fallback

// 注意：该引用须在 `import koaStatic from 'koa-static';` 的前面
import history from 'koa-connect-history-api-fallback';
app.use(history());

此时会发现ts报错提示： 找不到模块“koa-connect-history-api-fallback”或其相应的类型声明。ts(2307)

可以通过install该插件对应的类型声明文件依赖@types/koa-connect-history-api-fallback来解决，但我尝试安装后发现npm服务器不存在该类型声明文件，因此咱们用commonJs规范的方式引入该插件即可（因为这种方式默认导入的是 any 类型）

修改后的代码如下:

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

Node服务使用Express框架

使用connect-history-api-fallback插件来解决

• 安装依赖

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

• 使用方法

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

以上就是vue路由history模式页面刷新404解决方法Koa Express的详细内容，更多关于vue history模式页面刷新404的资料请关注脚本之家其它相关文章！