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

一、前端路由系统的由来

随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa(路由控制和视图转换框架)的兴起,前端路由系统随之开始流行。

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

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

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

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

二、hash模式

2.1 什么是hash模式

使用window.location.hash属性及窗口的onhashchange事件,可以实现监听浏览器地址hash值变化,执行相应的js切换网页。下面具体介绍几个使用过程中必须理解的要点:

  • hash指的是地址中#号以及后面的字符,也称为散列值。hash也称作锚点,本身是用来做页面跳转定位的。如http://localhost/index.html#abc,这里的#abc就是hash
  • 散列值是不会随请求发送到服务器端的,所以改变hash,不会重新加载页面
  • 监听 windowhashchange 事件,当散列值改变时,可以通过 location.hash 来获取和设置hash值
  • location.hash值的变化会直接反应到浏览器地址栏

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

2.2 改变#不触发网页加载

http://www.example.com/index.html#location1 
// 改成
http://www.example.com/index.html#location
// 浏览器不会重新向服务器请求index.html

2.3 使用到的api:

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

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

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

2.4 触发hashchange事件的几种情况

  • 浏览器地址栏散列值的变化(包括浏览器的前进、后退)会触发window.location.hash值的变化,从而触发onhashchange事件
  • 当浏览器地址栏中URL包含哈希如 http://www.baidu.com/#home,这时按下输入,浏览器发送http://www.baidu.com/请求至服务器,请求完毕之后设置散列值为#home,进而触发onhashchange事件
  • 当只改变浏览器地址栏URL的哈希部分,这时按下回车,浏览器不会发送任何请求至服务器,这时发生的只是设置散列值新修改的哈希值,并触发onhashchange事件
  • html中<a>标签的属性 href 可以设置为页面的元素ID如 #top,当点击该链接时页面跳转至该id元素所在区域,同时浏览器自动设置 window.location.hash 属性,地址栏中的哈希值也会发生改变,并触发onhashchange事件

2.5 为何实际项目中地址栏只改变哈希部分,按下回车会向服务器发送请求

这个问题的出现是应为缓存的配置(强缓存,协商缓存),如果不配置任何缓存,地址栏没有任何变化,按下回车也会重新加载页面。

三、history模式

3.1 history模式的由来

首先,hash 本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了。其次,hash 的传参是基于 url 的,如果要传递复杂的数据,会有体积的限制,而 history 模式不仅可以在url里放参数,还可以将数据存放在一个特定的对象中。
最重要的一点:如果不想要很丑的 hash,我们可以用路由的 history 模式

3.2 概述

  • window.history 属性指向 History 对象,它表示当前窗口的浏览历史。当发生改变时,只会改变页面的路径,不会刷新页面。
  • History 对象保存了当前窗口访问过的所有页面网址。通过 history.length 可以得出当前窗口一共访问过几个网址。
  • 由于安全原因,浏览器不允许脚本读取这些地址,但是允许在地址之间导航。
  • 浏览器工具栏的“前进”和“后退”按钮,其实就是对 History 对象进行操作

3.3 属性

History 对象主要有两个属性:

  • History.length:当前窗口访问过的网址数量(包括当前网页)
  • History.state:History 堆栈最上层的状态值
// 当前窗口访问过多少个网页
history.length // 1

// History 对象的当前状态
// 通常是 undefined,即未设置
history.state // undefined

3.4 方法

History.back()History.forward()History.go()

  • History.back():移动到上一个网址,等同于点击浏览器的后退键。对于第一个访问的网址,该方法无效果。
  • History.forward():移动到下一个网址,等同于点击浏览器的前进键。对于最后一个访问的网址,该方法无效果。
  • History.go():接受一个整数作为参数,以当前网址为基准,移动到参数指定的网址。如果参数超过实际存在的网址范围,该方法无效果;如果不指定参数,默认参数为0,相当于刷新当前页面
history.back();
history.forward();
history.go(1);//相当于history.forward()
history.go(-1);//相当于history.back()
history.go(0); // 刷新当前页面
//注意:移动到以前访问过的页面时,页面通常是从浏览器缓存之中加载,而不是重新要求服务器发送新的网页。

3.5 History.pushState()

该方法用于在历史中添加一条记录。pushState()方法不会触发页面刷新,只是导致 History 对象发生变化,地址栏会有变化。

语法:history.pushState(object, title, url)

  • object:是一个对象,通过 pushState 方法可以将该对象内容传递到新页面中。如果不需要这个对象,此处可以填 null。
  • title:指标题,几乎没有浏览器支持该参数,传一个空字符串比较安全。
  • url:新的网址,必须与当前页面处在同一个域。不指定的话则为当前的路径,如果设置了一个跨域网址,则会报错
var data = { foo: 'bar' };
history.pushState(data, '', '2.html');
console.log(history.state) // {foo: "bar"}

注意: 如果 pushState 的 URL 参数设置了一个新的锚点值(即 hash)并不会触发 hashchange 事件。 反过来,如果 URL 的锚点值变了,则会在 History 对象创建一条浏览记录。

如果 pushState() 方法设置了一个跨域网址,则会报错。

// 报错
// 当前网址为 http://example.com
history.pushState(null, '', 'https://twitter.com/hello');

上面代码中,pushState 想要插入一个跨域的网址,导致报错。这样设计的目的是,防止恶意代码让用户以为他们是在另一个网站上,因为这个方法不会导致页面跳转。

3.6 History.replaceState()

该方法用来修改 History 对象的当前记录,用法与 pushState() 方法一样。

假定当前网页是 example.com/example.html

history.pushState({page: 1}, '', '?page=1')
// URL 显示为 http://example.com/example.html?page=1

history.pushState({page: 2}, '', '?page=2');
// URL 显示为 http://example.com/example.html?page=2

history.replaceState({page: 3}, '', '?page=3');
// URL 显示为 http://example.com/example.html?page=3

history.back()
// URL 显示为 http://example.com/example.html?page=1

history.back()
// URL 显示为 http://example.com/example.html

history.go(2)
// URL 显示为 http://example.com/example.html?page=3

3.7 popstate 事件

每当 history 对象出现变化时,就会触发 popstate 事件

  • 仅仅调用pushState()方法或replaceState()方法 ,并不会触发该事件
  • 只有用户点击浏览器倒退按钮和前进按钮,或者使用 JavaScript 调用History.back()History.forward()History.go()方法时才会触发
  • 另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发
  • 页面第一次加载的时候,浏览器不会触发popstate事件

使用的时候,可以为popstate事件指定回调函数,回调函数的参数是一个 event 事件对象,它的 state 属性指向当前的 state 对象

window.addEventListener('popstate', function(e) {
	//e.state 相当于 history.state
	console.log('state: ' + JSON.stringify(e.state));
	console.log(history.state);
});

3.8 history 模式需要后端支持

history 模式要玩好,还需要后端配置支持

因为我们的应用是个单页客户端应用,仅有一个入口文件就是index.html

浏览器直接访问http://oursite.com/index.html可以正常加载我们的应用,此时在应用上面做操作完全没有问题,因为不会向后端发送请求

当时发生了下面两种情况,后端会因为url不匹配而报错:

  • 客户ctrl + F5刷新页面,或者地址栏按enter键重新加载页面,恰好此时页面的url不是 http://oursite.com/index.html
  • 客户不是通过http://oursite.com/index.html访问页面,而是通过http://oursite.com/dashoard访问页面

因为对浏览器和后端来说,history模式的url就是正常的url,后端会根据匹配规则匹配相应的api接口或者静态资源。因此需要在后端添加一个匹配所有情况的配置,如果url匹配不到,就返回index.html页面

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值