路由实现单页面原理初步了解

最新推荐文章于 2024-08-23 21:34:39 发布

潘仔plus

最新推荐文章于 2024-08-23 21:34:39 发布

阅读量290

点赞数

分类专栏：学习笔记

本文链接：https://blog.youkuaiyun.com/qq_38071854/article/details/89300678

版权

学习笔记专栏收录该内容

16 篇文章

订阅专栏

本文介绍了单页面应用中路由的基本原理，通过监听URL变化，使用Ajax请求数据并更新DOM。主要探讨了两种实现方式：hash模式，利用location对象的hash属性及hashchange事件；以及history模式，借助H5的pushState接口和popstate事件实现不刷新页面的URL切换，支持浏览器历史操作。

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

实现的基本原理是监听url的变化，截取url，然后根据url用Ajax请求数据，替换DOM。
通常有两种实现路由的方式：
1.hash模式
2.history模式

hash模式

location对象有一个hash属性，它的作用是返回或设置url中从#开始的url。
并且#后面的hash值的变化不会导致浏览器向服务器发送请求，也就不会导致页面刷新。
hash值的变化会触发hashchange事件

window.addEventListener('hashchange',function () {
//获取hash值
let hash = document.location.hash;
//之后根据hash值调用Ajax请求数据替换dom
})

history模式

1.history.pushState
pushstate是H5的新接口，用pushstate方法可以改变url而不刷新页面。

history.pushstate(state,title,url)

state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。允许设为null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，设为null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
2.popstate事件
popstate事件由history.go()和history.back()触发，配合popstate可以让路由支持浏览器的历史前进和后退操作。

window.addEventListener('popstate', function(){
//自定义Ajax事件
});