vue-router两种模式的区别

最新推荐文章于 2025-03-29 14:07:28 发布

原创最新推荐文章于 2025-03-29 14:07:28 发布 · 4.1k 阅读

32 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

每日一题

本文介绍了vue-router的两种模式：hash模式和history模式。hash模式利用URL的hash来模拟完整URL，改变#后面的部分不会触发浏览器请求，适合单页应用；history模式依赖HTML5的pushState和replaceState API，URL看起来更像传统服务器路由，但需要服务器配置以避免404错误。刷新页面时，history模式需要服务器支持，否则可能导致404。

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来。

标签

#vue.js