vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue history模式页面刷新404

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

作者:Bertil

这篇文章主要为大家介绍了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

在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的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文