vue中hash和history的区别？

Vue-router的路由分为hash和history模式<h4>1、hash方式</h4>hash方式是指url中存在 # 的一种方式，是vueRouter的默认模式，当#后面的url地址发生变化时，浏览器不会向服务器发送请求，故不会刷新页面当#后面的url地址发生变化时，会触发hashChange（hash模式得核心实现原理）事件，从而，我们可以通过监听hashChange事件来知道路由发生变化，从而进一步去更新我们的页面只可修改hash部分，当浏览器刷新时，浏览器只会向服务器去请求# 前面的域名服务器下根目录下的index.html文件hash模式会创建hashHistory对象,hashHistory对象有两个方法，push() 和 replace()HashHistory.push()会将新的路由添加到浏览器访问的历史的栈顶,而HasHistory.replace()会替换到当前栈顶的路由<h4>2、history模式</h4>history模式得路由和域名之间直接通过/连接，无#符分隔，就是普通url形式history模式当发生路由跳转时，通过HTML5的history.pushState()方法或者history.replaceState() 方法改变地址栏地址，并将地址的改变记录到浏览器访问栈中。（这里有一点需要注意，它只改变了浏览器地址栏中的地址，但并不会像服务器去发送请求）当浏览器前进，后台，或者调用back(),forward(), go()等方法时，会触发popstate事件。故，我们可以通过监听popstate事件来获取最新的路由地址，从而更新页面通过pushstate() 修改的url可以是与当前url同源的任意url。需要和服务器配合使用，否则容易出现页面404的情况 <h4>总结如下：</h4>hash模式带#号比较丑，history模式比较优雅；pushState设置的新的URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL；pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中；pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串；pushState可额外设置title属性供后续使用；hash兼容IE8以上，history兼容IE10以上；history模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误。

DreamCoders/CoderGuide

内容风险标识

评论 (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

内容风险标识