前端路由的诞生

前端发展史

1990年，Tim Berners Lee发明了世界上第一个网页浏览器 WorldWideWeb。
1995年，Brendan Eich只用了10天便完成了第1版网页脚本语言（JavaScript）的设计。当时网页基本是静态的，web应用是重服务端、轻客户端的模式。网页脚本语言的特点是：功能简单、语法简洁、易学习、易部署。
2005年，ajax技术使静态网页变为动态网页，异步请求和局部刷新改变了网页的交互模式。
2008年，Google推出新的js引擎v8，采用JIT（实时编辑）技术编辑js代码，大大提高了js的运行性能。
2009年，node.js将js带到了服务端开发领域。

ajax

前端路由的出现要从ajax开始。ajax就是使用XMLHttpRequest 对象与服务器通信。ajax可以在不重新刷新页面的情况下与服务器通信，交换数据或更新页面。它是浏览器用来实现异步加载的一种技术。

90年代初，大多数网页都是直接返回html，用户每次更新都需要重新刷新页面，极其影响交互体验。

1996年，微软提出了iframe标签，带来了异步加载和请求元素的概念。
1998年，微软的Outlook Web App团队提出ajax的基本概念（XMLHttpRequest的前身），并在IE5实现了这项技术。
2004年Gmail发布和2005年Google Map发布，才引起广泛重视。让ajax不局限于简单的数据与页面交互，促进了异步交互体验方式的发展。
ajax局部刷新导致浏览器url不发生任何变化就完成了请求，破坏用户体验。同时本次浏览的页面内容在用户下次使用url访问时无法重新呈现。异步交互的更高级版本就是SPA（单页应用）。单页面应用利用js动态变换网页内容避免页面重载。路由网页内容跟随url地址变化。页面交互和跳转都是无刷新的。为了实现单页应用，就有了前端路由。前端路由路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）

简介

hash

hash也叫锚点，主要用于页面定位。hash指地址中#号以及后面的字符，也称为散列值。hash值相对应的dom id的页面会出现在可视区。

hash更新的特点

hash值更新会改变url，但http请求不包含散列值，所以对后端无影响，不会触发页面重新加载。
hash值的更改，会改变浏览器的历史记录，并可以通过window.onhashchange事件监听。

改变hash值的方式

a标签
window.location.hash
history.forword(),history.back()。

history

History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。早期的history只能用于多页面的跳转。由于SPA的广泛应用，h5提供了两个新的API，history.pushState() 和 history.replaceState()。它们可以在改变url的同时不刷新页面。

区别

hash模式不太美观，history模式较优雅
pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL
pushState设置的新URL与当前URL一模一样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中
pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串
pushState可额外设置title属性供后续使用
hash模式兼容IE8以上，history兼容IE10以上
history模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误。基于 hash 的历史记录，它不需要在服务器上进行任何配置，所有页面的跳转都是在客户端进行操作。
搜索引擎根本不会处理hash模式，在SEO 上表现很差。

vue-router实现原理

当页面变化时，监听hashchange和popstate事件，做路由转换transitionTo

补充

URL 是 Web 中的一个核心概念。它是浏览器用来检索 web 上公布的任何资源的机制。URL 代表着是统一资源定位符（ Uniform Resource Locator ）。URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说，每个有效的 URL 都指向一个唯一的资源。 1个URL类似普通信件的地址：协议代表你要使用的邮政服务，域名是城市或者城镇，端口则像邮政编码；路径代表着你的信件所有递送的大楼；参数则提供额外的信息，如大楼所在单元；最后，锚点表示信件的收件人。

哈希路由（hash模式）和历史路由（history模式）