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

更新时间：2022年11月23日 14:58:22 作者：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的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

详解如何在Vue项目中实现累加动画
这篇文章主要为大家详细介绍了如何在你的Vue项目中实现累加动画，文中的示例代码简洁易懂，具有一定的参考价值，感兴趣的小伙伴可以了解一下
2023-06-06
vue实现双向绑定和依赖收集遇到的坑
这篇文章主要介绍了vue的双向绑定和依赖收集，主要是通过Object.defineProperty() 实现双向绑定，具体思路代码大家跟随小编一起看看吧
2018-11-11
uni-app中App与webview双向实时通信详细代码示例
在移动应用开发中,uni-app是一个非常流行的框架,它允许开发者使用一套代码库构建多端应用,包括H5、小程序、App等,这篇文章主要给大家介绍了关于uni-app中App与webview双向实时通信的相关资料,需要的朋友可以参考下
2024-07-07
Vue实现色板功能的示例代码
这篇文章主要为大家详细介绍了如何使用Vue实现色板功能，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下
2023-06-06
vue+vuex+json-seiver实现数据展示+分页功能
这篇文章主要介绍了vue+vuex+json-seiver实现数据展示+分页功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-04-04
Vue数组中出现__ob__:Observer无法取值问题的解决方法
__ob__: Observer这个属性其实是Vue监控变量产生的,下面这篇文章主要给大家介绍了关于Vue数组中出现__ob__: Observer无法取值问题的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-03-03
vue 移动端注入骨架屏的配置方法
骨架屏就是在页面未渲染完成的时候，先用一些简单的图形大致勾勒出页面的基本轮廓，给用户带来更好的体验。这篇文章主要介绍了vue 移动端注入骨架屏,需要的朋友可以参考下
2019-06-06
vue刷新页面时去闪烁提升用户体验效果的实现方法
这篇文章主要介绍了vue刷新页面时去闪烁提升体验方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-12-12
vue-element-admin按钮级权限管控的实现
开发离不开权限,不同的用户登录,根据不同的权限,可以访问不同的管理目录，本文主要介绍了vue-element-admin按钮级权限管控的实现，具有一定的参考价值，感兴趣的可以了解一下
2022-04-04
解决vue页面刷新产生白屏的问题
这篇文章主要介绍了解决vue页面刷新产生白屏的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07