Vue Router 路由实现原理

一、概念

路由的概念起源于服务端，在以前前后端不分离的时候，由后端来控制路由，当接收到客户端发来的 HTTP 请求，就会根据所请求的相应 URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。他也存在这优势与劣势：
通过改变 URL，在不重新请求页面的情况下，更新页面视图
优势：
安全性好，seo优化性能高
劣势：
加大服务器的压力，不利于用户体验。

二、实现方式

更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：
　
hash模式 和 history模式

1. Hash 在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；

特点：hash虽然在URL中，但不被包括在HTTP请求中；
用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

2. History 采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

history是html5新增的api,它的功能是修改地址栏但是不向服务器端发送真是请求，如果页面返回404，说明发送了请求到服务器端，并且服务器端对该请求没有做处理，那么解决404的方案就是：服务器端对于这类请求重定向到某个页面即可

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，
如 http://www.xxx.com/items/id。
后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

History属性

History 接口不继承于任何属性。

History.length 只读
返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。

History.scrollRestoration
允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。

History.state 只读
返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popstate 事件而查看状态的方式。

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/History