Vue SPA的基本实现原理

最新推荐文章于 2024-11-15 08:16:43 发布

真·skysys

最新推荐文章于 2024-11-15 08:16:43 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：大前端和跨平台技术

请明确标注出处

本文链接：https://blog.csdn.net/qq_33583069/article/details/104794145

大前端和跨平台技术专栏收录该内容

330 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了Vue Single Page Application（SPA）中前端路由的两种实现方式：基于window.history和location.hash。重点讲解了history对象的pushState和replaceState方法在实现SPA路由中的作用，以及popstate事件的触发条件。同时，提到了hash基本介绍和在前端路由中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常 SPA 中前端路由有2种实现方式：

window.history
location.hash
下面就来介绍下这两种方式具体怎么实现的

一.history

1.history基本介绍

window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法，它有几个原始方法：
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
history.go(n) - 接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()，go(0)相当于刷新当前页面
如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败
在HTML5，history对象提出了 pushState() 方法和 replaceState() 方法，这两个方法可以用来向历史栈中添加数据，就好像 url 变化了一样（过去只有 url 变化历史栈才会变化），这样就可以很好的模拟浏览历史和前进后退了，现在的前端路由也是基于这个原理实现的。