koa2-connect-history-api-fallback 使用
单页面应用程序(SPA)通常使用一个web浏览器可以访问的索引文件,比如index.html,然后,在HTML5 History API的帮助下(vue-router就是基于History API实现的),借助JavaScript处理应用程序中的导航。当用户单击刷新按钮或直接通过输入地址的方式访问页面时,会出现找不到页面的问题,因为这两种方式都绕开了History API,而我们的请求又找不到后端对应的路由,页面返回404错误。
connect-history-api-fallback中间件很好的解决了这个问题。具体来说,每当出现符合以下条件的请求时,它将把请求定位到你指定的索引文件(默认为/index.html)。
请求是Get请求
请求的Content-Type类型是text/html类型
不是直接的文件请求,即所请求的路径不包含.(点)字符
不匹配option参数中提供的模式
实际例子
前端使用vue搭建页面,然后build,生成静态的js css 文件,把文件放在后端的静态资源文件public中,如果直接在浏览器上访问 localhost:8000/xxxx 后端找不到xxxx路由就会报404
使用koa2-connect-history-api-fallback之后,koa就会把所有的get方式的请求都发给/index.html,然后由vue-router来接管页面路由
const history = require('koa2-connect-history-api-fallback');
//这句代码需要在koa-static上面
app.use(history());
app.use(require('koa-static')(path.join(__dirname, './public'))));
connect-history-api-fallback中间件有几个可选配置项:
index:配置默认的index页面
rewrites:通过正则配置,配置相关路由
verbose:日志选项
htmlAcceptHeaders:覆盖Accepts,更改请求的dataType配置
disableDotRule
koa2-connect-history-api-fallback 使用的更多相关文章
- History API与浏览器历史堆栈管理
移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现不存在兼容性问题,但是缺点也有--针对不支持o ...
- HTML5学习笔记之History API
这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美 ...
- 使用HTML5的History API
HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...
- 利用HTML5的History API实现无刷新跳转页面初探
HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- HTML5 History API 实现无刷新跳转
在HTML5中, 1. 新增了通过JS在浏览器历史记录中添加项目的功能. 2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 3. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三 ...
- HTML5 History API实现无刷新跳转
在HTML5中, 新增了通过JS在浏览器历史记录中添加项目的功能. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三点,可以实现在不刷新 ...
- html5 history api
1.html5 history api适用场景,个人理解最大的用处是配合ajax使用,使ajax拥有回退.前进的用户体验. 2.代码(dive into html5中的一个小例子) 1)fer.htm ...
- HTML5 history API实践
一.history API知识点总结 在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前 ...
随机推荐
- 4.NIO_Channel 通道
1.通道(Channel) 由 java.nio.channels 包定义的.Channel 表示 IO 源与目标打开的连接.Channel 类似于传统的“流”.只不过 Channel 本身不能直接访 ...
- C++之旋转矩阵和打印一个有规律的矩阵
旋转数组 描述: 某个图像通过一个整数组成的m*n矩阵表示,其中每个整数表示一个像素值.写出一种方法,根据flag变量的值将图像向右或者向左旋转90°.如果flag值为0,则向左旋转,如果flag为1 ...
- Linux系统组成和获取命令帮助4
Linux文件系统: 1.文件名名称严格区分字符大小写 2.文件可以使用除/以外任意字符 3.文件名长度不能超过255字符 4.以.开头的文件为 ...
- c++字符和字符串转整数类型及大小端
在网络传输中,很多数据都是按字节传递而不是字符串.最近就遇到了这个问题,在刚开始学c语言时都没有问题,可能太久不用了,记录一下 在报中文,用2个字节hex码来表示报文正文长度,什么是hex码呢 就是1 ...
- err:LIBUSB_SUCCESS / LIBUSB_TRANSFER_COMPLE
err:LIBUSB_SUCCESS / LIBUSB_TRANSFER_COMPLE err:LIBUSB_SUCCESS / LIBUSB_TRANSFER_COMPLE err:LIBUSB_S ...
- CSS基础学习-8.CSS盒子模型_标准盒子&&9.CSS怪异盒子
怪异盒模型 box-sizing:content-box;/*正常盒模型,默认值*/ box-sizing:border-box:/*怪异盒模型,固定了盒子的大小,无论是否添加内边距还是边框,盒子的大 ...
- 【CF786B】Legacy
题目大意:初始给定 N 个点,支持三种操作:两点之间连边:一个点与一个连续区间编号的点之间连边:一个连续区间内的点和一个点连边,求执行 N 次操作之后的单源最短路. 题解:学会了线段树优化建图. 发现 ...
- 燕化迷你ACDP程序FEM / BDC
带有BMW FEM / BDC模块的Mini ACDP可通过ICP或OBP模式支持FEM / BDC IMMO键编程.与传统的接线方式相比,它们有什么区别? 方法1:通过其他设备通过焊接进行FEM / ...
- sh_19_字符串拆分和拼接
sh_19_字符串拆分和拼接 # 假设:以下内容是从网络上抓取的 # 要求: # 1. 将字符串中的空白字符全部去掉 # 2. 再使用 " " 作为分隔符,拼接成一个整齐的字符串 ...
- 7.9模拟赛T1图的遍历(dfs)
图的遍历(dfs) [题目描述] 对于一个有向图G来说,我们存在一个经典的遍历算法,就是DFS (深度优先搜索遍历).将G以1号点为起点进行DFS后,我们可以 得到G的一棵DFS遍历树T.就此,我们可 ...