如何构建个人原生JavaScript单页面应用路由系统？

本文共计1934个文字，预计阅读时间需要8分钟。

目录+前言+简介+JavaScript的History API实现自己的原生JS路由+基于History API的Vanilla JS路由设置+使用后退和前进按钮起作用+初始化服务器端的路由负载+前言+当你想到路由时，通路由

目录

• 前言
• 简介
• JavaScript 的 History API
• 实现自己的原生JS路由
• 基于 History API 的 Vanilla JS 路由设置
• 使“后退”和“前进”按钮起作用
• 初始化服务器端的路由负载

前言

当你想到路由时，通常会想到类似react之类的库。但实际上，这些库和框架仍然使用vanillaJavaScript。那么该怎么实现呢？

我希望这个“JavaScript路由教程”能够帮你了解如何用原生js写出自己的路由。

简介

我遇到了很多出于各种原因想要自己创建路由的人。既然你看到本文，那意味着你可能也是其中的一个！

最重要的是，使用vanillajsrouter可以减少你对框架的依赖。

只要你了解实现它所涉及的所有部分，就可以相对容易的在原生 JavaScript 中创建自己的路由。

以下是制作自己的JS router时要了解的关键事项：

1.原生 JS 路由的关键是location.pathname属性。

2.侦听 “popstate”事件以响应.pathname的更改。