vue-router 的两种模式

前端路由的两种实现：这两种模式都是通过浏览器接口实现的。

前端路由原理的核心：“更新视图但不重新请求页面”。

两种实现途径：

一、hash 模式

hash（“#”）符号的本来作用是加在URL中指示网页中的位置：

#符号本身以及它后面的字符称之为hash，可通过window.location.hash属性读取。它具有如下特点：

(1)   hash虽然出现在URL中，但不会被包括在HTTP请求中。它是用来指导浏览器动作的，对服务器端完全无用，因此，改变hash不会重新加载页面。每次 hash 值的变化，会触发  hashchange  这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听  hashchange   来实现更新页面部分内容的操作。hash的改变会自动添加到浏览器的访问历史记录中，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来。

（2） 此机制下有两个重要的方法：

push()方法最主要的是对window的hash进行了直接赋值；

replace()方法与push()方法不同之处在于，它并不是将新路由添加到浏览器访问历史的栈顶，而是替换掉当前的路由。

二、history模式

利用 history interface在 HTML5中新增的方法，但代码结构以及更新视图的逻辑与hash模式基本类似。因为HTML5标准发布，多了两个 API，pushState() 和 replaceState()  。通过这两个 API 有以下两种功能：

（1）可以改变 url 地址且不会发送请求

（2）不仅可以读取历史记录栈，还可以对浏览器历史记录栈进行修改。

这两个方法有个共同的特点：当调用他们修改浏览器历史记录栈后，虽然当前URL改变了，但浏览器不会立即发送请求该URL，这就为单页应用前端路由“更新视图但不重新请求页面”提供了基础。

history模式主要有以下优势：

• pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL
• pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中
• pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串
• pushState可额外设置title属性供后续使用

history 模式的缺点：

当用户直接在地址栏中输入并回车，浏览器重启重新加载应用时，hash模式仅改变hash部分的内容，而hash部分是不会包含在HTTP请求中的，故在hash模式下遇到根据URL请求页面的情况不会有问题。

而history 模式下，url的修改和正常请求url一样，重新向后端发送请求，如后端没有配置对应/user/id的路由处理，则会返回404错误。当用户刷新页面之类的操作时，浏览器会给服务器发送请求，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

 

（文章部分参考了博文：https://zhuanlan.zhihu.com/p/27588422）