1.众所周知，vue是一个单页应用程序，它只在页面初始化时加载相应的html/css/js。页面不会因为用户的操作而重新加载或跳转，html内容会被javascript动态改变

Advantage :交互体验好，用户无需刷新页面，页面显示流畅，前后工分离模式好，减轻了服务器压力。缺点：不利于SEO，初始加载需要更多时间

2.哈希模式

Vue-router默认为hash模式——使用URL的hash来模拟一个完整的URL，这样当URL发生变化时，页面不会被重载，也就是应用单个页面。当#后的哈希发生变化时，不会导致浏览器向服务器发送请求。如果浏览器不发送请求，就不会刷新页面，并且会触发hasChange事件。通过监测哈希值的变化，实现部分页面内容的更新操作。

哈希历史对象是为哈希模式创建的。当访问不同的路由时，会发生两种情况：HashHistory.push()将新路由添加到浏览器访问历史堆栈的顶部，HasHistory.replace()替换当前堆栈顶部的路由。

3.历史模式

它主要是利用HTML5的两个API实现的：pushState()和replaceState()。pushState()可以在不发送请求的情况下更改url地址，replaceState()可以读取历史堆栈并修改浏览器记录。

Window.history.pushstate(状态对象、标题、URL)window . history . replace state(状态对象、标题、URL)包括三种方法：后退、前进、前进

history . go(-2)；//回去两次(2)；//往前走两次history . back()；//back history . forward()；//前向差异：

在前面的hashchange中，您只能在#之后更改url片段。推送状态设置的新网址可以是与当前网址相同的任何网址。历史模式将修改网址，就像普通请求后端的网址一样。如果后端没有配置对应于/user/id的路由处理，将返回404错误

摘要

以上就是边肖介绍的vue路由器两种模式的区别。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！