接着第一篇的绝对能看懂的Vue-Router之hash模式,现在讲讲history模式,这是第二篇
这种模式在我们浏览网页时就比较普遍,也是大众见的最多的一种URL地址栏的模式,vue-router官网是这么描述的
vue-router history模式的工作原理就是(下面这段话记着,可能面试要考🤐)
总结:history 提供了 pushState 和 replaceState 两个方法来记录路由状态修改URL,这两个方法只改变 URL 不会引起页面刷新。
分述一:在 history 模式下浏览器在刷新页面时,会按照路径发送真实的资源请求。如果 nginx 没有匹配得到当前的 url ,就会出现 404 的页面,所以需要服务端的支持
分述二:通过 onpopstate 事件监听history变化,在点击浏览器的前进或者后退功能时触发,在onpopstate 事件中根据状态信息加载对应的页面内容。
分述三(加分):404问题解决
以下是实践部分
<body>
<p>history API test</p>
<button id="btn1">修改 url</button>
<script>
// 页面初次加载,获取 path
document.addEventListener('DOMContentLoaded', () => {
console.log('load', location.pathname)
})
// 打开一个新的路由
// 【注意】用 pushState 方式,浏览器不会刷新页面
document.getElementById('btn1').addEventListener('click', () => {
const state = { name: 'page1' }
console.log('切换路由到->', 'page1')
history.pushState(state, '', '/page1')
// history.pushState(state, '')
// history.pushState(state, '', 'https://www.baidu.com')
})
// 监听浏览器前进、后退
window.onpopstate = (event) => {
console.log('onpopstate', event.state, location.pathname)
}
</script>
</body>
这里是对pushState进行了扩展!有兴趣的同学可以了解一下
MDN描述,第三个参数为可选,但传的话一定要同源,不然会报错。
pushState就和hash模式类似,但比hash模式更有优势
总结有2点
1:hash相同就不会创建历史条目,而pushState还是会创建
2:pushState第一个参数为state对象,它将比hash的方式更具扩展性,hash模式只能编码成一个短字符串
![](https://i-blog.csdnimg.cn/direct/86c8407f9c5b4e0fb7ab40337c287835.png)
浏览器的后退、前进按钮触发才能让onpopstate触发
![](https://i-blog.csdnimg.cn/direct/fc4bd2922bbc44278033ac90441ebcaf.png)
![](https://i-blog.csdnimg.cn/direct/e64dab80d7ea42cb9b41f1e30acb0cad.png)
![](https://i-blog.csdnimg.cn/direct/6abe1276782c4010ae466da63230d707.png)
history部分讲完了,还有两篇内容可以看我的主页。
创作不易,喜欢就点个赞和收藏。任何知识点我都会更通俗易懂的方式进行讲解,希望大家能真正掌握,而不是背诵~~