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();//在历史记录中前 ...
随机推荐
- Summer training #7
B:读懂题意模拟 #include <bits/stdc++.h> #include <cstring> #include <iostream> #include ...
- D - A or...or B Problem
题意:给定A,B,问[A,B]里取任意个数按位或,结果有多少种. 思路:这题需要找出一个分界点,即找到最高位的B是1,A是0的位置x(最低位从0开始),那么对于所有OR的结果,x处要么是1要么是0,x ...
- CSS——简写属性(在padding和margin这样的简写属性中,值赋值的顺序是top、right、bottom、left)
/* 在padding和margin这样的简写属性中,值赋值的顺序是top.right.bottom.left. 它们还有其他简写方式,例如给padding两个值,则第一个值表示top/bottom, ...
- uboot驱动模型(DM)分析(二) (转)
上篇分析了两个关键宏U_BOOT_DRIVER及U_BOOT_DEVICES的作用,有了上篇的基础,本文将分析: 1.上篇中的uboot_list段中的信息如何被用起来? 2.uclass,uclas ...
- New!Devexpress WPF各版本支持VS和SQL Server版本对应图
点击获取DevExpress v19.2.3完整版试用下载 本文主要为大家介绍DevExpress WPF各大版本支持的VS版本和支持的.Net版本图,Devexpress WPF v19.2.3日前 ...
- Java程序中实现 MySQL数据库的备份与还原
案例代码: 数据库备份 //mysqldump -h端口号 -u用户 -p密码 数据库 > d:/test.sql --备份D盘 //备份 public static void dataBase ...
- BZOJ 4278: [ONTAK2015]Tasowanie (后缀数组 / 二分+hash)
直接归并,然后如果哪边的后缀字典序比较小就去哪边,然后就可以后缀数组 博客传送门- 但是本蒟蒻不会后缀数组 Upd:Upd:Upd:现在会了233.一道差不多的题:BZOJ 1692: [Usaco2 ...
- logback.xml 配置详解(转)
<?xml version="1.0" encoding="UTF-8"> <configuration> <!-- 设置控制台日 ...
- [Functional Programming] Examples: When and Unless
/** * When */ const _branch = (x) => { const result = (x && x.isPublic) ? dissoc('private ...
- 51nod 1172 Partial Sums V2
题目 给出一个数组A,经过一次处理,生成一个数组S,数组S中的每个值相当于数组A的累加,比如:A = {1 3 5 6} => S = {1 4 9 15}.如果对生成的数组S再进行一次累加操作 ...