vue-router 中 hash 模式和 history 模式的不同

hash模式

hash模式是vue-router的默认模式。hash指的是url描点，当描点发生变化的时候，浏览器只会修改访问历史记录，不会访问服务器重新获取页面。因此可以监听描点值的变化，根据描点值渲染指定dom。

• 改变描点

可以通过location.hash = "/hashpath"的方式修改浏览器的hash值。

• 监听描点变化

可以通过监听hashchange事件监听hash值的变化。

history模式

通过mode选项开启history模式，history 模式和 hash 模式的区别在于：

1. history模式中不带有“#”，更加美观
2. history模式当用户刷新或直接输入地址时会向服务器发送一个请求，所以history模式需要服务端同学进行支持，将路由都重定向到根路由

• 改变url

H5的history对象提供了pushState和replaceState两个方法，当调用这两个方法的时候，url会发生变化，浏览器访问历史也会发生变化，但是浏览器不会向后台发送请求。

// 第一个参数：data对象，在监听变化的事件中能够获取到
// 第二个参数：title标题
// 第三个参数：跳转地址
history.pushState({}, "", '/a')

• 监听url变化

可以通过监听popstate事件监听history变化，也就是点击浏览器的前进或者后退功能时触发。

window.addEventListener("popstate", () => {
    const path = window.location.pathname
    // 根据path不同可渲染不同的dom
})

从某种程度来说，调用 pushState() 和 window.location = "#bar"基本上一样，他们都会在当前的 document 中创建和激活一个新的历史记录。但是 pushState() 有以下优势：

• 新的 URL 可以是任何和当前 URL 同源的 URL。但是设置 window.location 只会在你只设置锚的时候才会使当前的 URL。
• 非强制修改 URL。相反，设置 window.location = "#bar"; 仅仅会在锚的值不是 #bar 情况下创建一条新的历史记录。
• 可以在新的历史记录中关联任何数据。window.location = "#bar"形式的操作，你只可以将所需数据写入锚的字符串中。