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动态代理无须重启项目解决方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
Vue3.5中响应式Props解构的编译原理
在Vue3.5版本中,响应式Props的解构功能正式转正,该功能允许即使在解构后也不丢失响应性,文通过编译阶段的处理,如何保持解构后的props变量仍保持响应性,编译过程中的defineProps宏函数处理,通过AST和上下文操作实现变量替换,从而让解构后的变量在运行时维持响应式状态
2024-09-09
vue3中vite使用sass的配置方法
这篇文章主要介绍了vue3中vite使用sass的配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-01-01
简单的三步vuex入门
通过简单的三步让大家对VUEX快速的入门，本文还介绍了VUEX的最基础的函数以及相关知识点，有兴趣的学习下。
2018-05-05
Vue项目配置跨域访问和代理proxy设置方式
这篇文章主要介绍了Vue项目配置跨域访问和代理proxy设置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
iview tabs 顶部导航栏和模块切换栏的示例代码
这篇文章主要介绍了iview tabs 顶部导航栏和模块切换栏的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
vue使用Element组件时v-for循环里的表单项验证方法
这篇文章主要介绍了vue使用Element组件时v-for循环里的表单项验证方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
Vue router动态路由实现过程
Vue动态路由(约定路由),听起来好像很玄乎的样子,但是你要是理解了实现思路,你会发现没有想象中的那么难,下面这篇文章主要给大家介绍了关于vue实现动态路由添加功能的简单方法,需要的朋友可以参考下
2023-03-03
vue-treeselect无法点击问题(点击无法出现拉下菜单)
这篇文章主要介绍了vue-treeselect无法点击问题(点击无法出现拉下菜单)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue3父子组件通信之子组件修改父组件传过来的值
这篇文章主要介绍了vue3父子组件通信之子组件修改父组件传过来的值,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-05-05