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();//在历史记录中前 ...
随机推荐
- codeforces 576C Points on Plane 相邻两点的欧拉距离
题意:给出n个点,要求排序后,相邻两点的欧拉距离之和小于等于2.5e9做法:由于0≤ xi, yi ≤ 1e6,所以可以将x<=1000的点分成一份,1000<x<=2000的点分成 ...
- postConstruct执行过程
使用@PostConstruct注解修饰的方法会在服务器加载Servlet时运行,并且只会执行一次,在构造函数之后,在init方法之前执行: 执行的顺序一次是:构造函数-->autowired依 ...
- 基于Kibana的可视化监控报警插件sentinl入门
sentinl是什么 Kibi/Kibana Alert & Reporting App Watching your data, 24/7/365 sentinl是一个免费的kibana预警与 ...
- 报表开发神器!DevExpress Reporting v19.1:WinForms平台新功能
行业领先的.NET界面控件DevExpress Reporting全新发布了v19.1版本,本文主要为大家介绍WinForms.ASP.Net Core平台.Visual Studio报表设计器中发布 ...
- Oracle之:查询锁表,删除锁表
-- 查询当前哪个表被锁 select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo. ...
- 1、Socket通信
[TCP] 服务器端:无目标插座升级为有目标插座后,就可以通过有目标的插座收发数据 客户端: 实战:此案例有利于理解Socket的工作流程. 缺点:服务器只能接收1个客户端的连接,因为只写了一个Acc ...
- perl 纯变量(Scalar) 转载
转载http://blog.chinaunix.net/uid-20639775-id-154591.html Perl有三种变量: 纯变量(Scalar Varible) 数组(Array) 关联数 ...
- vue-cli3项目中引入jquery 以及如何引进bootstrap
1.安装jquery npm install jquery --save 2.或则在package.json中指定版本号,然后运行npm install命令 "dependencies&qu ...
- Unity常用API备忘录
UnityEditor 复制文本到剪切板 GUIUtility.systemCopyBuffer 获取资源路径 AssetDatabase.GetAssetPath 选择节点 Selection.a ...
- MySQL 主从复制 (CentOS 7)
1.主从复制原理 (1) 当master 服务器上的数据发生改变时,则将其改变写入二进制日志文件中: (2) slave服务器会在一定时间间隔内对 master 服务器上的二进制日志进行探测,探测其是 ...