本质
需要对url进行修改和监听,对于SPA来说,是在容器DOM中动态地去加载对应的视图渲染回调。 并不是真实的网页跳转,和服务器没有发生交互,纯粹发生在浏览器端的行为。
类型
- hash模式
- 改变url:通过window.location.hash = 'hash',会在url后面拼接‘#hash值’
- 监听url:通过window.addEventListener('hashchange'),监听hash的改变
- history模式
- 改变url:通过history.pushState(state, title, url),会在url后面增加‘/url’
- 监听url:通过window.addEventListener('popstate'),监听浏览器的前进、后退行为触发的url变化
敲重点:window.history提供的原型方法pushState、replaceState只会修改url,并不会触发页面刷新和跳转,也不会触发popstate事件。go、forward、back方法以及用户手动点击浏览器前进、后退才会触发popstate。
-
刷新404:刷新会发送请求,服务器未找到url对应的资源,因此返回404。这种情况,需要服务器配置默认返回‘index.html’对应的首页资源。