vue路由history模式页面刷新404解决方法Koa 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的资料请关注其它相关文章!

原文地址:https://juejin.cn/post/7165114668048973831