vue路由history模式页面刷新404解决方法Koa Express
作者：Bertil 发布时间：2024-06-07 15:22:33
标签：vue,history,页面刷新,404
为什页面刷新会出现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());
来源：https://juejin.cn/post/7165114668048973831
0
投稿猜你喜欢
Scrapy下载图片项目介绍Scrapy是一个适用爬取网站数据、提取结构性数据的应用程序框架，它可以通过定制化的修改来满足不同的爬虫需求。使- NumPy数组是一个多维数组对象，称为ndarray创建一个numpy数组，如下所示import numpy as npx=np.array
- 假设有这样一个任务，希望对某个文件夹（包括所有子文件夹与文件）中的所有文件进行处理。这就需要遍历整理目录树， 处理遇到的每个文件。impor
- 前言之前用vue+ant-design-vue写了一个动态路由的页面，更新看一下不能用了555~~~之前用的组件版本不知道了，回退也不知道哪
- 一、安装redis：1.下载：wget http://download.redis.io/releases/redis-3.2.8.tar.
- 本文实例讲述了python提取字典key列表的方法。分享给大家供大家参考。具体如下：这段代码可以把字典的所有key输出为一个数组d2 = {
- 前言栈、队列和优先级队列都是非常基础的数据结构。Python作为一种“编码高效”的语言，对这些基础的数据结构都有比较好的实现。在业务需求开发
- 前言大家好，我们今天来爬取c站的高校名单，把其高校名单，成员和内容数获取下来，不过，我们发现这个网站比我们平时多了一个验证，下面看看我是怎么
- asp中利用XMLhttp对象获取远程的数据，然后用二进制输出到客户浏览器，让客户下载数据,此例从某一远程服务器获取一个压缩包，并且输出到浏
- by cpglkg <script>var arr=[5,10,15];function rect(arr,width){&nb
- 在同事那整了个免安装版的Mysql，然后添加到window服务，但是中间出现很多问题，总结一下个人经验，希望其他人不要走弯路。1)在同事那或
- 在一些网页应用中，就比如在投票系统中，当我们进行的是多项投票时，我们要求用户最多只能选择几项进行投票，这也是就是说选择复选框的个数最多几个.
- 自定义函数import requestsfrom bs4 import BeautifulSoupheaders={'User-Ag
- <html> 题:<br /> 有n个直线最多可以把一个平面分成多少个部分<br /><br /&
- <span class="up-btn" id="selectFile">请选择文件&l
- 在学习了一点 Python 基础之后，我们可以做一个罚点球的小游戏，大概流程是这样：每一轮，你先输入一个方向射门，然后电脑随机判断一个方向扑
- “位置：首页 第一屏通栏 格式：jpg 尺寸：960*90 ……”在工作我们经常会接到这样的banner设计需求，由
- 上次帮朋友写过的一个简单切换效果,超级简单,但也比较适用.因为用到了CSS Sprite技术,DEMO中附带了IE6兼容png的JS.核心J
- 1、简介pyqt 列表 单元格中 不仅可以添加数据，还可以添加控件。我们尝试添加下拉列表、一个按钮试试。setItem:将文本放到单元格中s
- 一、PIL的基本概念：PIL中所涉及的基本概念有如下几个：通道（bands）、模式（mode）、尺寸（size）、坐标系统（coordina
