【JavaScript】基于SPA的单页面路由

游戏开发
2025-08-21 00:09:01

文章目录一. 基于SPA的单页面路由二. hash 实现三. history 实现

一. 基于SPA的单页面路由

什么是路由和前端路由

路由（英文：router）就是对应关系路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系前端路由就是浏览器地址栏中的 URL 与所见网页的对应关系(Hash地址与组件之间的对应关系) 组件（英文：components）：指对具体的某个功能进行封装，来达到组件复用，提高开发效率。

什么是SPA

SPA（single page application），翻译过来就是单页应用，SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载(刷新)，也不会将控制转移到其他页面我们熟知的JS框架如react,vue,angular都属于SPA举个例子来讲就是一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们发现，变的始终是杯子里的内容，而杯子始终是那个杯子

如何实现前端路由？要实现前端路由，需要解决两个核心：

如何改变 URL 却不引起页面刷新？如何检测 URL 变化了？

实现路由的方式有两种:

依赖 hash 的改变(锚点)依赖历史记录(history) 二. hash 实现

当一个窗口的hash （URL 中 # 后面的部分）值改变时就会触发 hashchange 事件。

改变 URL 中的 hash 部分不会引起页面刷新。

触发 hashchange 事件的几种方式：通过浏览器前进后退改变 URL、通过a标签改变 URL、通过window.location改变URL。

<body> <ul>  <li><a href="#/home">home</a></li> <li><a href="#/about">about</a></li>  <div id="routeView"></div> </ul> </body> // 监听路由变化 window.addEventListener('hashchange', onHashChange) // 路由视图 var routerView = null function onLoad () { routerView = document.querySelector('#routeView') onHashChange() } // 路由变化时，根据路由渲染对应 UI function onHashChange () { switch (location.hash) { case '#/home': routerView.innerHTML = 'Home' return case '#/about': routerView.innerHTML = 'About' return default: return } } 三. history 实现

history 提供了 pushState方法改变 URL 的 path 部分不会引起页面刷新。

pushState() 方法三个参数: 一个状态对象(一般为null), 一个标题 (目前被忽略), 和 (可选的) 一个URL.

popstate 事件每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发.

需要后端配合

标签：

【JavaScript】基于SPA的单页面路由由讯客互联游戏开发栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“【JavaScript】基于SPA的单页面路由”

上一篇
C#XPath的概念

下一篇
MySQL主从搭建