Skip to main content

页面模式

SPA和MPA

SPA

SPA(single-page application),即单页面应用,只加载一个 HTML 页面,通过 JavaScript 动态地更新内容。

用户在应用程序中导航时,只是切换内容,而不会重新加载整个页面。

SPA 使用路由 hash 来管理前端路由,即在 url 中看到类似 /#/page 的 hash 片段。

window.addEventListener('hashchange', refreshDom)

MPA

MAP(multi-page application),即多页面应用,每个链接通常会加载一个新的 HTML 页面。

用户在应用中导航时,会触发整个页面的重新加载。

MAP 使用基于 history 的路由,这种方式使用浏览器的 History API 来修改 url,使得 url 更加清晰,更好地支持 SEO。

  • window.history.pushState
  • window.history.replaceState
window.addEventListener('popstate', refreshDom)