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实现简单分页器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
vue使用路由router-view的详细代码
这篇文章主要介绍了vue使用路由router-view的相关知识,其原理就是采用 SPA(single-page-application) 模式,就是只有一个 Web 页面的应用,通过 router 来控制页面的刷新和迭代,感兴趣的朋友一起看看吧
2023-12-12
从零开始实现Vue简单的Toast插件
这篇文章主要给大家介绍了如何从零开始实现Vue简单的Toast插件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
vue.js开发环境安装教程
这篇文章主要为大家详细介绍了vue.js开发环境的安装教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
vue+Element-ui的el-table的多级内容渲染问题
这篇文章主要介绍了vue+Element-ui的el-table的多级内容渲染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue-property-decorator用法详解
这篇文章主要介绍了vue-property-decorator用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
学习Vue框架中必掌握的重点知识
这篇文章主要介绍了学习Vue中必掌握的重点知识，想了解vue的同学可以参考下
2021-04-04
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
这篇文章主要介绍了Vue 基于 vuedraggable 实现选中、拖拽、排序效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-05-05
使用vuepress搭建静态博客的示例代码
这篇文章主要介绍了使用vuepress搭建静态博客的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-02-02
vue3响应式实现readonly从零开始教程
这篇文章主要为大家介绍了vue3响应式实现readonly从零开始教程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03