前端单页面路由两种模式：hash模式与history模式

路由是什么？

路由字面意思是道路指引，网络意思是把信息从源地址传送到目的地，路由的作用是分发请求，通常根据路由表来分组转送；

hash模式路由：根据url hash值的变化来展示不同的内容,在任何情况下都可以使用，因为url如果只有hash值发生变化的话，页面不会刷新；

// 获取hash值
let hash = window.location.hash

设置hash值

• 直接设置

window.location.hash = '#haha'

• 通过a标签实现

<header>
    <a href="#1">go to 1</a>
    <a href="#2">go to 2</a>
    <a href="#3">go to 3</a>
  </header>

缺点

• seo不友好；因为服务器收不到hash

history模式路由：使用条件是后端将前端路由都渲染一个页面；

得到pathname值

let pathname = window.location.pathname

假如url为http://localhost:1234/8888#uu，那么pathname为/8888

<header>
    <a href="/8888">go to 1</a>
    <a href="/9999">go to 2</a>
    <a href="/7777">go to 3</a>
  </header>

当我们使用history方式来做前端路由，每次改变pathname页面虽然会指向同一个页面但是都会重新刷新一次，这样用户体验非常不好，但是我们可以使用history.pushState() 来实现不刷新情况下改变url；