vue 的几种路由模式
、UE路由
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; //更新页面内容
}
1
2
3
4
这样就实现了，通过监听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])
1
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';
}
}
1
2
3
4
5
6
7
8
9
看下控制台：
replaceState()
语法：
history.replaceState(stateObj, title, [url])
1
stateObj：一个保存页面状态的JavaScript对象，可以为null。
titile：短标题，通常为空，当前大多数浏览器会忽略此参数，但未来可能会有用。
url：页面地址，不设置默认为当前页面地址。表示页面状态对象要作用的页面地址。
根据replaceState的语法可以发现，跟pushState的功能差不多，只不过一个是添加，一个是替换。
了解了pushState和replaceState的用法后，history路由模式的原理大概也就很清晰了：通过pushState()和replaceState()函数操作浏览器的历史栈，将页面状态对象保存在历史栈中，监听页面history的state属性的变化，对应的更新视图。
已知history模式下的url是不包含#的，更加简洁，但是不包含#会有个问题，就是刷新页面的时候，会报404错误，找不到页面。
所以这时候需要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
hash模式与history模式比较
采用hash模式，则路由只能修改#后面的部分，即只可以设置与当前同文档的url；采用history模式的路由可以设置的新的url，可以是与当前url同源的任意url。
hash模式只可以添加短字符串到历史记录中，history模式可以通过pushState添加任意类型的数据到历史记录栈中。
history模式因为是直接修改url，所以为了防止报404错误，需要服务器配置对应的路由处理。而hash模式不需要。
————————————————
版权声明：本文为CSDN博主「丁大少」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_35855343/article/details/108732539