前言

我们在使用VueRouter的时候，一般都会使用这两种模式history和hash模式，作为初学者，相信很多人区分不开这两者的区别，这篇文章给大家讲讲这两者的区别

hash模式 🍌🍌

简介：hash模式其实是使用了锚点技术来进行了重写URL访问路径，它会在原有的URL的路径后面拼接/#/xxx,这种方法是的好处就是在于可以在不重新加载原有的HTML文件的基础上，实现切换URL路径的目的，下面就带着大家看一下原生的hash模式的实现。

 <div>
    <a href="#/index.html">访问首页</a>
    <a href="#/about.html"> 访问关于页面 </a>
 </div>
 <div>
    <div class="page index"> 我是首页</div>
    <div class="page about">我是关于页面</div>
 </div>

 // 当切换路径是触发
  window.onhashchange = (event) => {
     //console.log(event);
    var newURL = event.newURL.split("#/")[1].split(".")[0]
    var oldURL = event.oldURL.split("#/")[1].split(".")[0]
    var newPage = document.querySelector("." + newURL)
    var oldPage = document.querySelector("." + oldURL)
    newPage.style.display = "block"
    oldPage.style.display = "none"
  }

首先要介绍一下onhashchange这个事件：

onhashchange 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发，所以说，当#后面的url发生改变的时候就会触发这个事件。

我通过打印这个事件中的event参数可以发现它可以获取到newURL和oldURL，作为演示示例我们可以截取后面的index来获取DOM元素（这部分如果看不太懂得可以去查一下split方法），获取到DOM元素之后我们给newPage的display设置为block，给oldPage的设置为none。这样就实现了切换的效果。

优点：我们使用hash模式的优点在于hash模式使用的是纯静态的技术，它可以在不触发页面重新加载的前提之下来实现页面URL的改变，配合onhashchange 函数来实现，当URL中的hash部分发生变化时，就会触发这个函数，通过JavaScript中的DOM操作来实现页面的切换效果。

缺点：hash模式的缺点在于当我们一些分布式开发时候，由于每个人开发一个项目，最后部署在不同的服务器上面，这个时候如果使用hash模式的话有时候会出现问题，因为URL中只允许一个#的存在，那么这时候就可能会出现冲突的情况,并且hash其实在视觉上也不是很美观（对于某些强迫症程序员来说）

history模式🛰🛰

简介：history也是一种VueRouter的路由模式，history与hash不同之处在于，他不使用锚点技术来重写URl路径，它可以直接重写URL路径，所以在路径之中就不存在#，在视觉上面更加的美观，history模式采用了history对象中的pushState函数来实现重写UR路径，下面我们就通过代码来说明：

 <div>
    <a href="javascript:jump('/index')">访问首页</a>
    <a href="javascript:jump('/about')">访问关于页面 </a>
 </div>
  <!-- 下面这部分代码和上面的一样 -->
  <div> .....</div>

  // 跳转函数
  function jump(path) {
    // 重写url路径为超链接传入的名称
    history.pushState(null, "page", path)
    // 获取所有页面
    var pages = document.querySelectorAll(".page")
    console.log(pages);
    // 获取指定的页面跳转对象
    var newPage = document.querySelector(path.replace("/", "."))
    // 隐藏其他的页面
    pages.forEach(item => {
      item.style.display = "none"
    });
    newPage.style.display = "block"
  }

首先还是要介绍一下pushState这个方法：history.pushState方法接受三个参数，依次为：

state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。可用它来传一些数据

title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。

url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

虽然history模式可以重写URL路径但是重写之后的新路径并不包含原有的HTML物理文件的访问地址，所以hsitory模式在重写URL路径之后，一旦刷新页面就会造成404无法访问的效果，虽然在VueCli开发环境中解决了history模式刷新的问题，但是当项目发布上线的时候由于history模式的URl路径问题，还是与生产服务器来进行配合，来用以支持history路由的加载。所以这就需要前端开发者要与后端做好一定的配合，但是对于一些初级的程序员来说，这无疑是提升了一定的难度。

就如下实例演示的那样由于跳转之后失去了原本的history-router这部分，所以会导致一刷新就会出现问题。

所以我在开发的时候会使用hash模式更多一点，因为使用history模式要进行好配合，否则可能会出现一些问题。

总结 ⛹️‍♀️⛹️‍♀️

经常使用VueRouter，但是对其中的模式一直不是很理解，所以就写了这篇博客来总结一下，我认为学习就是这样，从一些细节入手，然后窥一斑而见全貌，在这过程中有时候还会有以外的守护。这就会使自己产生惊喜，从而更愿意去投入时间产生正向的反馈。

VueRouter中的history模式和hash模式的区别

前言

hash模式 🍌🍌

history模式🛰🛰

总结 ⛹️‍♀️⛹️‍♀️