基于hash和pushState的网页前端路由实现
客户端路由
对于客户端(通常为浏览器)来说,路由的映射函数通常是进行一些DOM的显示和隐藏操作。这样,当访问不同的路径的时候,会显示不同的页面组件。客户端路由最常见的有以下两种实现方案:
* 基于Hash
* 基于History API
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
基于Hash的路径有:
http://test.com/
http://test.com/#/foobar
URL中#以及后面的部分都是hash。
const url=require('url')
var a=url.parse('http://test.com/a/b/#/foo/bar')
console.log(a.hash)
// => #/foo/bar
hash仅仅是客户端的一个状态,也就是说,当向服务器发请求的时候,hash部分并不会发过去。
HTML5新添了onhashchange事件给window对象,在Ajax应用中,开发人员通过利用url参数列表保存状态或导航信息。通过监听这个事件,可以实现简单的路由
EventUtil.addHandler(window,"hashchange",(event)=>{
console.log("Old Url: "+event.oldURL+" New Url: "+event.newUrl+" Current hash: "+window.location.hash);
var path=hash.substring(1);//去掉 # 号
})
使用一下代码检测浏览器是否支持hashchange()事件
var isSupported= ("onhashchange" in window)&&
(document.documentMode === undifined || document.documentMode>7);//IE8+才支持
基于History API的路径有:
http://test.com/
http://test.com/foobar
当直接访问http://example.com/的时候,两者的行为是一致的,都是返回了index.html文件。
当从http://example.com/ 跳转到 http://example.com/#/foobar或者http://example.com/foobar的时候,也都是正常的,因为此时已经加载了页面以及脚本文件,所以路由跳转正常。
当直接访问 http://example.com/#/foobar 的时候,实际上向服务器发起的请求是 http://example.com/ ,因此会首先加载页面及脚本文件,接下来脚本执行路由跳转,一切正常。
当直接访问 http://example.com/foobar 的时候,实际上向服务器发起的请求也是 http://example.com/foobar ,然而服务器端只能匹配 / 而无法匹配 /foobar ,因此会出现404错误。
因此需要对服务器路由映射进行改造.
比如,在Express中进行静态路由映射 或者 动态路由映射
app.get('/user',(req,res,next)=>{
// ...do something
});
app.get('/user/:id',(req,res,next)=>{
// ...do something
// var id=req.query.id;
});
基于hash和pushState的网页前端路由实现的更多相关文章
- 基于vue-router的移动端网页的路由管理
本篇代码示例:github 前提:不关注移动端浏览器的前进事件 涵盖功能: 1,管理路由的历史记录 2,切页动画的实现 3,处理流程类页面的回退事件 描述: 流程类页面的回退事件的解释: 以注册 ...
- 简单的基于hash和hashchange的前端路由
hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...
- 前端路由两种模式:hash、history
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- 前端路由的两种模式: hash 模式和 history 模式
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- 前端路由的两种模式:hash(#)模式和history模式(转)
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- 前端路由以及浏览器回退,hash & history & location
一.前言 其实不止一次想监听浏览器的回退方法,比如 在 list.html 页滚动加载了几页列表,点到 detail.html 看详情,反回来时又得重新加载几页 H5 有背景音乐的,跳页就得重新放,体 ...
- 【前端路由】Vue-router 中hash模式和history模式的区别
咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
- 前端路由hash、history原理及简单的实践下
阅读目录 一:什么是路由?前端有哪些路由?他们有哪些特性? 二:如何实现简单的hash路由? 三:如何实现简单的history路由? 四:hash和history路由一起实现 回到顶部 一:什么是路由 ...
- 前端路由原理之 hash 模式和 history 模式
什么是路由? 个人理解路由就是浏览器 URL 和页面内容的一种映射关系. 比如你看到我这篇博客,博客的链接是一个 URL,而 URL 对应的就是我这篇博客的网页内容,这二者之间的映射关系就是路由. 其 ...
随机推荐
- safari打不开该网页,因为网址无效
Safari打开导航时,提示:safari打不开该网页 因为网址无效 解决方法:安装百度地图
- POJ-2230-Watchcow-欧拉回路的路径输出+结构体
Watchcow 这道题的题意好理解,就是要从1出发,每条边都走两遍,最后再回到1: 但是,我一开始没有想到和欧拉回路有什么关系: 学了求欧拉的dfs()后,试了一下发现和样例差不多: 感觉求回路,什 ...
- HDU-6333 Problem B. Harvest of Apples 莫队
HDU-6333 题意: 有n个不同的苹果,你最多可以拿m个,问有多少种取法,多组数据,组数和n,m都是1e5,所以打表也打不了. 思路: 这道题要用到组合数的性质,记S(n,m)为从n中最多取m个的 ...
- CF1028C Rectangles 思维
Rectangles time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...
- CF 988C Equal Sums 思维 第九题 map
Equal Sums time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...
- 牛客练习赛51 A abc
A. abc 题意: 给出一个字符串s,你需要做的是统计s中子串”abc”的个数.子串的定义就是存在任意下标a<b<c,那么”s[a]s[b]s[c]”就构成s的一个子串.如”abc”的子 ...
- 实现 Java 本地缓存,该从这几点开始
缓存,我相信大家对它一定不陌生,在项目中,缓存肯定是必不可少的.市面上有非常多的缓存工具,比如 Redis.Guava Cache 或者 EHcache.对于这些工具,我想大家肯定都非常熟悉,所以今天 ...
- Oracle 11g Rac 用rman实现把本地数据文件迁移到ASM共享存储中
在Oracle Rac环境中,数据文件都是要存放在ASM共享存储上的,这样两个节点才能同时访问.而当你在某一节点下把数据文件创建在本地磁盘的时候,那么在另一节点上要访问该数据文件的时候就会报错,因为找 ...
- JSP标签介绍
JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. jsp的常用标签有以下三个 <j ...
- Kafka源码分析及图解原理之Broker端
一.前言 https://www.cnblogs.com/GrimMjx/p/11354987.html 上一节说过,任何消息队列都是万变不离其宗都是3部分,消息生产者(Producer).消息消费者 ...