如何制作自己的原生JavaScript路由

2024-10-03 13:17:01

前言

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

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

简介

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

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

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

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

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

2.侦听 “popstate”事件以响应.pathname的更改。每当在浏览器的地址栏中输入新的 URL，但我们不想刷新页面时，就会发生这种情况，我们只是想通过加载新内容来刷新视图。

3.你可以选择将路由存储在routes[]数组中。

4.必须用JavaScript 正则表达式（RegEx）才能解析 URL。

5.如果希望将路由集成到本机浏览器体系结构中，那么对history和history.pushState（JavaScript 的 History API）的基本了解至关重要。

首先，我们将处理 History API。

JavaScript 的 History API

我看过很多没有提到 JavaScript History API 的vanilla JS router教程。太糟糕了，因为单击浏览器的“后退”和“前进”按钮与浏览历史记录中的 URL 导航有关。如果没有 History API，就无法谈论路由。

1.history.back()与history.go(-1)相同，或者当用户在浏览器中单击Back按钮时。你可以用任何一种方法达到相同的效果。

2.当用户按下浏览器的Forward按钮时，将执行history.forward()，它等效于history.go(1)”。

3.go()与.back()和forward()方法相似，不同之处在于你可以指定浏览器历史记录栈中要前进或后退的步数。。

4.pushState()会将新状态推送到 History API。

5..length属性是会话历史记录中的元素数。

6..state属性用于查找状态，而无需侦听“ popstate”事件。

实现自己的原生JS路由

基于 History API 的 Vanilla JS 路由设置

先让我们仔细研究构建 URL 切换器所需的最少代码（而无需刷新页面），然后我会向你展示其的工作方式的 GIF 动图。

<html>
    <head>
        <title>Hello</title>
        <script type = "module">
            function select_tab(id) {
                // remove selected class from all buttons
                document.querySelectorAll(".route").forEach(item => item.classList.remove('selected'));
                // select clicked element (visually)
                document.querySelectorAll("#" + id).forEach(item => item.classList.add('selected'));
            }
            function load_content(id) {
                // Update text "Content loading for {id}..."
                // Of course, here you would do you content loading magic
                // Perhaps run Fetch API to update resources
                document.querySelector("#content").innerHTML = 'Content loading for /' + id + '...';
            }
            function push(event) {
                // Get id attribute of the box or button or link clicked
                let id = event.target.id;
                // Visually select the clicked button/tab/box
                select_tab(id);
                // Update Title in Window's Tab
                document.title = id;
                // Load content for this tab/page
                loadContent(id);
                // Finally push state change to the address bar
                window.history.pushState({id}, `${id}`, `/page/${id}`);
            }
            window.onload = event => {
                // Add history push() event when boxes are clicked
                window["home"].addEventListener("click", event => push(event))
                window["about"].addEventListener("click", event => push(event))
                window["gallery"].addEventListener("click", event => push(event))
                window["contact"].addEventListener("click", event => push(event))
                window["help"].addEventListener("click", event => push(event))
            }
            // Listen for PopStateEvent (Back or Forward buttons are clicked)
            window.addEventListener("popstate", event => {
                // Grab the history state id
                let stateId = event.state.id;
                // Show clicked id in console (just for fun)
                console.log("stateId = ", stateId);
                // Visually select the clicked button/tab/box
                select_tab(stateId);
                // Load content for this tab/page
                loadContent(id);
            });
        </script>
        <style>
            * { /* global font */
                font-family: Verdana;
                font-size: 18px;
            }
            #root { display: flex; flex-direction: row; }
            #content { display: flex;
                display: block;
                width: 800px;
                height: 250px;
                /* vertically centered text */
                line-height: 250px;
                border: 2px solid #555;
                margin: 32px;
                text-align: center;
            }
            .route {
                cursor: pointer;
                justify-content: center;
                width: 150px;
                height: 50px;
                /* vertically centered text */
                line-height: 50px;
                position: relative;
                border: 2px solid #555;
                background: white;
                text-align: center;
                margin: 16px;
            }
            .route.selected { background: yellow; }
        </style>
    </head>

    <body>

        <section id = "root">
            <section class = "route" id = "home">/home</section>
            <section class = "route" id = "about">/about</section>
            <section class = "route" id = "gallery">/gallery</section>
            <section class = "route" id = "contact">/contact</section>
            <section class = "route" id = "help">/help</section>
        </section>

        <main id = "content">Content loading...</main>

    </body>

</html>

核心是对的window.history.pushState({id}, ${id}, /page/${id});调用；

第一个参数是状态的唯一 ID，第二个是“标签标题”文本，第三个参数是你希望地址栏中要现实的路径。这就是使浏览器无需重新加载页面即可更改 URL 的原因。

结果。现在，每次我们单击按钮时，URL实际上都会在浏览器的地址栏中更改。内容框也会更新。

我们的原生 JS 路由开始运行了。请注意，每次单击按钮时，history.pushState 被触发。我们只需将存储在元素的 id 属性中的 clicked 元素的 id 传递给它即可：home，about，gallery等。它们应与你要导航到的实际页面一致。当然这不是存储页面名称的唯一方法，例如可以用 array [] 或其他任何方式。这就是本例中的操作方式。

当然我们还需要从服务器加载有关该位置的布局和资源的内容。这取决于你的程序。可以是任何东西。

使“后退”和“前进”按钮起作用

通过使用history.pushState，你将自动使Back和Forward按钮导航到上一个或下一个状态。这样做会产生popstate事件。这是你必须再次更新视图的部分。（第一次是我们单击按钮时。）

但是由于该事件带有单击的id，因此单击Back或Forward时很容易刷新视图并重新加载内容。

我们在这里没有使用react或vue，因此在我的源代码中load_content将负责直接在 DOM 中更新视图。此区域可能填充了你的 API 加载的某些内容。由于这只是“前端”示例，因此我无法向你展示太多内容。但这就是它在客户端上的工作方式。

初始化服务器端的路由负载

将它们放在一起还需要再执行一个步骤。在我的例子中，只用了router.html。当你第一次在 PWA 中加载此路由时，必须确保如果直接在地址栏中输入/page/home时，它可以工作。

到目前为止，我们仅从前端更改了路由器地址。假定每次你导航到出现在路由按钮上的 URL 时，实际上都会从服务器单独加载该 URL。

因此你有责任确保/page/about将路由器和页面的加载到应用程序的根视图中。它还应突出显示“current”按钮。

实施完毕后，你的路由就完成了。你如何选择重新加载#content元素中的内容完全取决于你自己和你的后端设计。

以上就是如何制作自己的原生JavaScript路由的详细内容，更多关于制作原生JavaScript路由的资料请关注我们其它相关文章！

初学node.js-nodejs中实现删除用户路由

一.users_model.js 功能:定义用户对象模型 var mongoose=require('mongoose'), Schema=mongoose.Schema; var UserSchema=new Schema({ username:{type:String,unique:true}, email:String, color:String, hashed_password:String }); mongoose.model('User',UserSchema); 二.users_c
nodejs中实现修改用户路由功能

经过前面几次的学习,已经可以做下小功能,今天要实现的是修改用户路由. 一.users_model.js 功能:定义用户对象模型 var mongoose=require('mongoose'), Schema=mongoose.Schema; var UserSchema=new Schema({ username:{type:String,unique:true}, email:String, color:String, hashed_password:String }); mongoose
Node.js 路由的实现方法

我们平时工作中,涉及到后台开发,路由基本上是我们第一个需要建的,路由还是很重要的. 那么,什么是路由呢,通俗点举个例子,一个宾馆前台,来了十位客人,前台会安排十位客人入住,每位客人到达宾馆以后,该去哪个房间,都是通过前台来安排.(别喷我) 在一个域名下,会有很多个可访问的地址,这就是路由. 我们呢,要为路由提供请求的URL和其他需要的GET及POST参数,随后路由需要根据这些数据,来决定执行哪些代码./ 因此,我们要查看HTTP请求,从中提取出来我们需要的URL以及GET/POST参数. 我们需
Vue.js路由实现选项卡简单实例

本文实例为大家分享了Vue.js路由实现选项卡的具体代码,供大家参考,具体内容如下需要实现下图效果,点击上方选项卡,切换到不同内容的组件: 事先准备好两个库文件(vue.js.vue-router.js),放到对应路径. 1.引入依赖库 <script src="vue.js" type="text/javascript" charset="GBK"></script> <script src="vue-
JS实现前端路由功能示例【原生路由】

本文实例讲述了JS实现前端路由功能.分享给大家供大家参考,具体如下: 路由就是根据不同的 url 地址展示不同的内容或页面,早期路由的概念是在后端出现的,通过服务器端渲染后返回页面,随着页面越来越复杂,服务器端压力越来越大.后来ajax异步刷新的出现使得前端也可以对url进行管理,此时,前端路由就出现了. 单页面就是有前端路由来实现的,也就是说网站只有一个页面,点击导航会显示不同的内容,对应的url也在发生改变.在这个过程中,js会实时检测url的变化,从而改变显示的内容. 路由实现的原理:wi
vue.js路由mode配置之去掉url上默认的#方法

比如 : http://localhost:8080/#/login 路由中间默认带有 # 如果需要去掉#,只需将mode的默认值'hash'改为'history'即可. router.js : import Router from 'vue-router' import routers from './routers' export default () => { return new Router({ routers, mode: 'history' // 加上这个配置项,url默认的 #
nuxt.js 在middleware(中间件)中实现路由鉴权操作

路由鉴权: 就是判断这个路由当前浏览者是否需要权限访问. 一般我是通过判断cookie中存储的token来判断的. 在middleware文件夹下新建"auth.js"的文件在当前auth.js文件内判断cookie中是否包含token字段 import getCookie from '~/utils/getCookie' export default function ({route, req, res, redirect}) { let isClient = process.cl
Nodejs封装类似express框架的路由实例详解

代码如下 var http=require('http'); var ejs=require('ejs'); var app=require('./model/express-route.js'); console.log(app); http.createServer(app).listen(3000); app.get('/',function(req,res){ var msg='这是数据库的数据' ejs.renderFile('views/index.ejs',{msg:msg},fu
关于vue路由缓存清除在main.js中的设置

1.main.js /* 页面数据缓存 */ var _CACHE_OBJS = {}; function _init_cache(comp, key, cache) { var obj = cache[key]; if (obj !== undefined) { comp[key] = obj; } var deep = typeof comp[key] === 'object'; comp.$watch(key, function (val) { //console.log("page &q
如何制作自己的原生JavaScript路由

前言当你想到路由时,通常会想到类似react之类的库.但实际上,这些库和框架仍然使用vanillaJavaScript.那么该怎么实现呢? 我希望这个"JavaScript路由教程"能够帮你了解如何用原生js写出自己的路由. 简介我遇到了很多出于各种原因想要自己创建路由的人.既然你看到本文,那意味着你可能也是其中的一个! 最重要的是,使用vanillajsrouter可以减少你对框架的依赖. 只要你了解实现它所涉及的所有部分,就可以相对容易的在原生 JavaScript 中创建自己
原生JavaScript制作计算器

原生JavaScript制作计算器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>  X:<input type="text" id="inp1" value="" /&g
原生javascript制作的拼图游戏实现方法详解

本文实例讲述了原生javascript制作的拼图游戏实现方法.分享给大家供大家参考,具体如下: 实现方法 //1.让所有的li(在ul里)可以拖拽 //2.交换li的位置计算背景图位置 //1.让所有的li(在ul里)可以拖拽 //根据鼠标的位置,计算目标li的序号 //根据行号和列号计算下标 //行号*3+列号 //2.归位此处没有背景图请自行添加 css样式 <!DOCTYPE html> <html> <head> <meta charset=&q
原生javascript制作贪吃蛇小游戏的方法分析

本文实例讲述了原生javascript制作贪吃蛇小游戏的方法.分享给大家供大家参考,具体如下:     HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta char
原生javascript实现文件异步上传的实例讲解

效果图: 代码:(demo33.jsp) <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>demo33.jsp</title> </head> <body> <label for="text">名称</label>
原生javascript实现的全屏滚动功能示例

本文实例讲述了原生javascript实现的全屏滚动功能.分享给大家供大家参考,具体如下: 原理: 1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度 2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题. 废话不多说,直接上代码 html代码: <div id="wrap"> <div id="main" style="top: 0;"> <div class="content num
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】

本文实例讲述了原生JavaScript实现的淘宝轮播图效果.分享给大家供大家参考,具体如下: 轮播图是我们学习原生js的必经之路它包含很多基本知识的运用,像this的使用,DOM的操作,还有setInterval的使用和清除,浮动与定位等等,很好的考察了我们的基础知识牢不牢固, 话不多说,直接上图 HTML代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF
原生JavaScript实现AJAX、JSONP

相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象连接服务器发送请求接收响应数据
原生Javascript和jQuery做轮播图简单例子

接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮
原生JavaScript实现Ajax的方法

首先为大家分享了原生JavaScript实现Ajax代码,供大家参考,具体内容如下 var getXmlHttpRequest = function() { if (window.XMLHttpRequest) { //主流浏览器提供了XMLHttpRequest对象 return new XMLHttpRequest(); } else if (window.ActiveXObject) { //低版本的IE浏览器没有提供XMLHttpRequest对象 //所以必须使用IE浏览器的特定实现A