Vue 的两种路由模式

Vue 的两种路由模式

参考：https://www.jianshu.com/p/81ccd1124f48

在 vue-router 路由对象中，路由有两种模式： hash 和 history，而默认的是 hash 模式，hash 模式背后的原理是：

1. hash路由

hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

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

http://www.example.com/index.html#print

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

• hash虽然出现在URL中，但不会被包括在HTTP请求中。它是用来指导浏览器动作的，对服务器端完全无用，因此，改变hash不会重新加载页面

• 可以为hash的改变添加监听事件：

  window.addEventListener("hashchange", funcRef, false)

• 每一次改变hash（window.location.hash），都会在浏览器的访问历史中增加一个记录

• 监听路由的变化：onhashchange 事件，只有 # 后面的地址发生变化，可以在 window 对象上监听这个事件:

window.onhashchange = function(event) {
    console.log(event.oldURL, event.newURL);
    let hash = loaction.hash;  // 通过location对象来获取hash地址
    console.log(hash);           // "#/notebooks/260827/list"  从#号开始
}

因为 hash 发生变化的 url 都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用。

2. history路由

随着 history api 的到来，前端路由开始进化了，前面的 onhashchange，你只能改变 # 后面的 url 片段，而 history api 则给了前端完全的自由。

history api 可以分为两大部分，切换和修改。

2.1 切换历史状态

包括 back，forward，go 三个方法，对应浏览器的前进，后退，跳转操作。

history.go(-2);    //后退两次
history.go(2);  //前进两次
history.back(); //后退
hsitory.forward(); //前进

2.2 history模式问题

我们知道对于单页应用来讲，理想的使用场景是仅在进入应用时加载index.html，后续在的网络操作通过Ajax完成，不会根据URL重新请求页面，但是难免遇到特殊情况，比如用户直接在地址栏中输入并回车，浏览器重启重新加载应用等。

hash模式仅改变hash部分的内容，而hash部分是不会包含在HTTP请求中的：

http://oursite.com/#/user/id   // 如重新请求只会发送http://oursite.com/

故在hash模式下遇到根据URL请求页面的情况不会有问题。

而history模式则会将URL修改得就和正常请求后端的URL一样

http://oursite.com/user/id

在此情况下重新向后端发送请求，如后端没有配置对应/user/id的路由处理，则会返回404错误。官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。

3. 两种模式比较

在一般的需求场景中，hash模式与history模式是差不多的，但几乎所有的文章都推荐使用history模式，理由竟然是："#" 符号太丑...0_0 "

如果不想要很丑的 hash，我们可以用路由的 history 模式 ——官方文档

history 模式包括了 history.pushState()，history.replaceState() 两个方法，这两个方法接收三个参数：stateObj，title，url

history.pushState({color:'red'}, 'red', 'red'})
history.back();

history.forward()；

通过 pushstate 把页面的状态保存在 state 对象中，当页面的 url 再变回这个 url 时，可以通过 event.state 取到这个 state 对象。

根据MDN的介绍，调用history.pushState()相比于直接修改hash主要有以下优势：

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