随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行。

从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下):

  1. 记录当前页面的状态(保存或分享当前页的url,再次打开该url时,网页还是保存(分享)时的状态);
  2. 可以使用浏览器的前进后退功能(如点击后退按钮,可以使页面回到使用ajax更新页面之前的状态,url也回到之前的状态);

作为开发者,要实现这两个功能,我们需要做到:

  1. 改变url且不让浏览器向服务器发出请求;
  2. 监测 url 的变化;
  3. 截获 url 地址,并解析出需要的信息来匹配路由规则。

我们路由常用的hash模式和history模式实际上就是实现了上面的功能。

hash模式

这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash 也 称作 锚点,本身是用来做页面定位的,她可以使对应 id 的元素显示在可视区域内。

由于 hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件,浏览器的进后退也能对其进行控制,所以人们在 html5 的 history 出现前,基本都是使用 hash 来实现前端路由的。

使用到的api:

window.location.hash = 'qq' // 设置 url 的 hash,会在当前url后加上 '#qq'

var hash = window.location.hash // '#qq'  

window.addEventListener('hashchange', function(){
// 监听hash变化,点击浏览器的前进后退会触发
})

history模式

已经有 hash 模式了,而且 hash 能兼容到IE8, history 只能兼容到 IE10,为什么还要搞个 history 呢?
首先,hash 本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了。其次,hash 的传参是基于 url 的,如果要传递复杂的数据,会有体积的限制,而 history 模式不仅可以在url里放参数,还可以将数据存放在一个特定的对象中。
最重要的一点:

如果不想要很丑的 hash,我们可以用路由的 history 模式
—— 引用自 vueRouter文档

相关API:

window.history.pushState(state, title, url)
// state:需要保存的数据,这个数据在触发popstate事件时,可以在event.state里获取
// title:标题,基本没用,一般传 null
// url:设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的,否则会抛出错误。url可以是绝对路径,也可以是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/'),则变成 https://www.baidu.com/a/qq/,
//执行history.pushState(null, null, '/qq/'),则变成 https://www.baidu.com/qq/ window.history.replaceState(state, title, url)
// 与 pushState 基本相同,但她是修改当前历史记录,而 pushState 是创建新的历史记录 window.addEventListener("popstate", function() {
// 监听浏览器前进后退事件,pushState 与 replaceState 方法不会触发
}); window.history.back() // 后退
window.history.forward() // 前进
window.history.go(1) // 前进一步,-2为后退两步,window.history.lengthk可以查看当前历史堆栈中页面的数量

history 模式改变 url 的方式会导致浏览器向服务器发送请求,这不是我们想看到的,我们需要在服务器端做处理:如果匹配不到任何静态资源,则应该始终返回同一个 html 页面。

前端路由的两种模式:hash(#)模式和history模式(转)的更多相关文章

  1. 浅析使用vue-router实现前端路由的两种方式

    关于vue-router 由于最近的项目中一直在使用vue,所以前端路由方案也是使用的官方路由vue-router,之前在angularJS项目中也是用过UI-router,感觉大同小异,不过很显然v ...

  2. 前端路由的两种模式: hash 模式和 history 模式

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  3. Vue-router(前端路由)的两种路由模式

    Vue的两种路由模式: hash.history:默认是hash模式: 前端路由(改变视图的同时不会向后端发出请求) 一.什么是hash模式和history模式? hash模式:是指url尾巴后的#号 ...

  4. 【源码拾遗】从vue-router看前端路由的两种实现

    本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由,介绍了相关原理,并对比了两种方式的优缺点与注意事项.最后分析了如何实现可以直接从文件 ...

  5. vue路由的两种模式配置以及history模式下面后端如何配置

    vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变has ...

  6. k8s的两种网络方案与多种工作模式[flannel与calico]

    k8s的两种网络方案与多种工作模式 1. Flannel: flannel有三种工作模式: 1. vxlan(隧道方案) 2. host-gw(路由方案) 2. udp(在用户态实现的数据封装解封装, ...

  7. 用easyui从servlet传递json数据到前端页面的两种方法

    用easyui从servlet传递json数据到前端页面的两种方法 两种方法获取的数据在servlet层传递的方法相同,下面为Servlet中代码,以查询表中所有信息为例. //重写doGet方法 p ...

  8. vue路由的两种模式,hash与history

    对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-router存在的意义.前端路由的核心,就在于——— 改变视图的同时不会向后端发出请求. 一.为 ...

  9. java:常用的两种设计模式(单例模式和工厂模式)

    一.单例模式:即一个类由始至终只有一个实例.有两种实现方式(1)定义一个类,它的构造方法是私有的,有一个私有的静态的该类的变量在初始化的时候就实例化,通过一个公有的静态的方法获取该对象.Java代码  ...

随机推荐

  1. PHP的分页

    页面的效果 页面的css @CHARSET "UTF-8"; *{ margin:0; padding:0; } body{ width:800px; margin:0 auto; ...

  2. Sphinx全文索引安装教程

    首先了解一下sphinx全文索引的相关知识官方网站:http://www.sphinxsearch.com/ 官方文档:http://www.sphinxsearch.com/docs/ 中文支持:h ...

  3. JWT加密

    JWT是一种加密算法,为了防止请求的信息在传输途中被拦截修改 JWT的引用: install-package jwt JWF由三部分组成:Header,Payload,Signature Payloa ...

  4. Build rpm example:zram

    rpmbuild #ll zram-1.0.0 total 32 -rw-r--r-- 1 root root 948 Aug 21 16:44 Makefile -rw-r--r-- 1 root ...

  5. [读书笔记] R语言实战 (十四) 主成分和因子分析

    主成分分析和探索性因子分析是用来探索和简化多变量复杂关系的常用方法,能解决信息过度复杂的多变量数据问题. 主成分分析PCA:一种数据降维技巧,将大量相关变量转化为一组很少的不相关变量,这些无关变量称为 ...

  6. oracle数据库服务介绍

    共有7个服务,这七个服务的含义分别为: 1. Oracle ORCL VSS Writer Service:Oracle卷映射拷贝写入服务,VSS(Volume Shadow Copy Service ...

  7. 紫书 例题7-14 UVa 1602(搜索+STL+打表)

    这道题想了很久不知道怎么设置状态,怎么拓展,怎么判重, 最后看了这哥们的博客 终于明白了. https://blog.csdn.net/u014800748/article/details/47400 ...

  8. React 中的 refs的应用

    React Refs React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上. 这个特殊的属性允许你引用 render() 返回的相应的支撑实例( back ...

  9. thinkphp 多个字段的不同关系的查询条件实现 .

    tp的$map不同条件默认是 and ,如果要用or<><><><>如下 例如查询Stu表中年龄大于18,或者身高低于180cm的男性(1为男性),(例 ...

  10. List<T>与List<?>的区别

    T 代表某一类型 ? 代表任意类型.. T因为代表是某一确定类型..所以你可以使用它..比如你有个List<T>类型的变量tList 你可以用T t = tList.get(1);也可以用 ...