vue-router两种模式的区别

vue-router两种模式的区别

1.hash模式

vue-router默认的是hash’[hæʃ] '模式，使用URL的hash来模拟一个完整的URL，于是当URL改变的时候，页面不会重新加载，也就是单页面应用了。当#后面的hash发生变化，不会导致浏览器向服务器发出请求，浏览器不会发出请求就不会刷新页面，并且会触发hasChange这个事件，通过监听hash值的变化来实现更新页面部分内容的操作。

对于hash模式会创建hashHistory对象，在访问不同的路由的时候，会发生两件事：

HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶，和HasHistory.replace()替换到当前栈顶的路由。

2.history模式

因为HTML5标准的发布，多了两个API，pushState() 和 replaceState()。通过这两个API

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

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

除此之外，还有popState()，当浏览器跳转到新的状态时，将触发popState事件。

添加/修改历史状态

包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

// 逐条添加历史记录条目
window.history.pushState(stateObject, title, URL)
// 修改历史记录
window.history.replaceState(stateObject, title, URL)

切换历史记录

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

区别：

• 前面的hashChange，你只能通过改变#后面的url片段。而pushState设置的新URL可以是与当前URL同源的任意URL。
• history模式则会将URL修改得就和正常请求后端的URL一样，如后端没有配置对应/user/id的路由处理，则会返回 404 错误。

当用户刷新页面之类的操作时，浏览器会给服务器发送请求，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

history模式怕啥
不怕前进，不怕后退，就怕刷新，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的。

在history模式下，你可以自由的修改path。history模式最终的路由都体现在url的pathname中，这部分是会传到服务器端的，因此需要服务端对每一个可能的path值都作相应的映射。

当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。