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
- 使用方法(此演示是使用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的资料请关注脚本之家其它相关文章!