持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

Vue-router的 MemoryHistory 是什么?

MemoryHistory 是最新版的 Vue-router，为什么要提出这个问题呢？因为他算是 Vue-router 的三个模式的深入

Vue-router 的三种模式

• mode: 'hash' -> Hash
• mode: 'history' -> WebHistory
• mode: 'abstract' -> abstract history 其中，hash 和 history 是 SPA 单页应用程序的基础。

先说结论： spa应用路由有2种模式，hash 和 history，vue路由有3种模式，比 spa 多了一个 abstract。

Vue-router v4 升级之后，mode: 'xxx' 替换为 API 的形式，但功能是一样的

• mode: 'hash' 替换为 createWebHashHistory()
• mode: 'history' 替换为 createWebHistory()
• mode: 'abstract' 替换为 createMemoryHistory()

mode:hash

优点：完全前端路由，只改变#后面值，无刷新。

缺点：不会出现在http请求中，SEO不友好。

简单的代码演示

// 页面初次加载，获取 hash
document.addEventListener('DOMContentLoaded', () => {
    console.log('hash', location.hash)
})
// hash 变化，包括：
// a. JS 修改 url
// b. 手动修改 url 的 hash
// c. 浏览器前进、后退
window.onhashchange = (event) => {
    console.log('old url', event.oldURL)
    console.log('new url', event.newURL)

    console.log('hash', location.hash)
}

mode:history

优点：在同源的情况下，实现了前端完全自由，stateObject可以是任何数据类型，URL可以是相对路径也可以是绝对路径。

缺点：如果后端没有做对应的路由，在刷新时会出现404。

常用的两个 API

• history.pushState
• window.onpopstate

页面刷新时，服务端要做处理，可参考文档。即无论什么 url 访问 server ，都要返回该页面。

按照 url 规范，不同的 url 对应不同的资源，例如：

• https://github.com/ server 返回首页
• https://github.com/username/ server 返回用户页
• https://github.com/username/project1/ server 返回项目页

但是用了 SPA 的前端路由，就改变了这一规则，假如 github 用了的话：

• https://github.com/ server 返回首页
• https://github.com/username/ server 返回首页，前端路由跳转到用户页
• https://github.com/username/project1/ server 返回首页，前端路由跳转到项目页

mode:abstract

支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

总结三种模式的区别

• hash - 使用 url hash 变化记录路由地址
• history - 使用 H5 history API 来改 url 记录路由地址
• abstract - 不修改 url ，路由地址在内存中，但页面刷新会重新回到首页。

连环问：react-router 有几种模式？

react-router 有三种模式，设计上和 vue-router 一样

• browser history
• hash history
• memory history