vue学习笔记---【Vue的两种路由模式】

一个人到底可以懒到什么程度？我感觉可能是无极限吧！

VUE路由

vue的路由干啥用的？

已知咱们的Vue框架搭建的项目是SPA（单页面应用），项目里只有一个html页面。

为啥只有一个html呢？
为了减少页面的刷新，每次切换浏览器都刷新页面对用户很不友好。更新视图但不请求刷新页面，是我们前端路由的核心理念。

所以vue的路由的作用就是：通过改变 URL，在不重新请求刷新页面的情况下，更新页面视图。

路由的实现方式

知道了路由是干啥的，那么怎么实现这种功能呢，vue提供了两种实现路由的模式：hash模式 和 history模式。

hash模式

顾名思义，就是利用了url中的hash，即url的锚，也就是url中#后边的部分。（可以通过window.location.hash获取。）

hash的特点：

• hash虽然包含在url中，但是不包含在http请求中。它是用来指导浏览器动作的，对服务器端毫无影响。
• 可以监听hash的变化。（通过onhashchange事件监听）
• 浏览器的历史记录可以保存每一次hash的变化。

综合hash的以上特点，完全可以实现在不刷新页面的情况下更新视图了。

vue的hash路由模式的原理就是，监听hashchange，动态的修改路由：

window.onhashchange = function(event){
     console.log(event.oldURL, event.newURL); // 监听hash改变的新旧URL
     document.getElementById("app").innerHTML = x;    //更新页面内容
}

这样就实现了，通过监听hash的改变，实现在不刷新页面的情况下，更新视图啦！

history模式

H5给history对象提供了History Interface后，前端路由开始进化了。于是出现了History路由实现模式。而且使用history路由模式，链接地址中没有#，看起来更简洁一些。

我们已知window.history对象包含着浏览器的历史记录。也经常使用History的常用方法：back()、forward()、go()等区域操作读取浏览器的历史记录栈，去进行各种跳转操作。

• history.back()：相当于点击浏览器的回退按钮
• history.forward()：相当于点击浏览器的前进按钮
• history.go(n)：n参数为前进页面的个数，比如go(1)相当于前进一个页面，go(-1)相当于后退一个页面。

在vue中，我们主要通过History对象h5新增的两个方法 pushState() 和 replaceState()来实现路由。

pushState()

语法：

history.pushState(state, title[, url])

• state：一个JavaScript对象，保存页面的状态。当监听到导航的state属性更新时，就会触发一个popstate事件，之前保存页面状态的JavaScript对象会保存在这个event事件的state属性中。
• title：短标题，通常为空，当前大多数浏览器会忽略此参数，但未来可能会有用。
• url：页面地址，不设置默认为当前页面地址。表示页面状态对象要作用的页面地址。

综上，pushState的原理：就是讲页面的状态保存到history对象的state属性中，通过监听历史记录的变化，改变当前页面的视图。

举个例子：

console.log(history);
history.pushState({color:'red'}, '');
console.log(history);
window.onpopstate = function(event){
     console.log(event.state);
     if(event.state && event.state.color === 'red'){
           document.body.style.color = 'red';
     }
}

看下控制台：

replaceState()

语法：

history.replaceState(stateObj, title, [url])

• stateObj：一个保存页面状态的JavaScript对象，可以为null。
• titile：短标题，通常为空，当前大多数浏览器会忽略此参数，但未来可能会有用。
• url：页面地址，不设置默认为当前页面地址。表示页面状态对象要作用的页面地址。

根据replaceState的语法可以发现，跟pushState的功能差不多，只不过一个是添加，一个是替换。

了解了pushState和replaceState的用法后，history路由模式的原理大概也就很清晰了：通过pushState()和replaceState()函数操作浏览器的历史栈，将页面状态对象保存在历史栈中，监听页面history的state属性的变化，对应的更新视图。

已知history模式下的url是不包含#的，更加简洁，但是不包含#会有个问题，就是刷新页面的时候，会报404错误，找不到页面。
所以这时候需要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

hash模式与history模式比较

1. 采用hash模式，则路由只能修改#后面的部分，即只可以设置与当前同文档的url；采用history模式的路由可以设置的新的url，可以是与当前url同源的任意url。
2. hash模式只可以添加短字符串到历史记录中，history模式可以通过pushState添加任意类型的数据到历史记录栈中。
3. history模式因为是直接修改url，所以为了防止报404错误，需要服务器配置对应的路由处理。而hash模式不需要。