正文

前端hash路由基本原理,及代码的基本实现

志林哥哥  志林哥哥  2022-10-13  687

关键词：

路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。

早期的路由都是后端实现的，直接根据 url 来 reload 页面，页面变得越来越复杂服务器端压力变大，随着 ajax 的出现，页面实现非 reload 就能刷新数据，也给前端路由的出现奠定了基础。我们可以通过记录 url 来记录 ajax 的变化，从而实现前端路由。（可以根据不同的url来展示不同的页面，很好的优化了页面的交互体验。）
目前有两种方式：

1：H5的history的新API（pushstate、replacestate、popstate）;由于不兼容IE10以下，本文不进行讨论；可自行查看官网：https://developer.mozilla.org/en-US/docs/Web/API/History

2：hash路由基本实现原理：

　　* 浏览器不会识别url中#后面的内容，所以改变#后面的内容不会触发reload；

　　* 通过hashchange我们可以监听到#后面内容的改变，然后就可以进行ajax等操作。实现页面的改变

在线Demo直通车

下面代码展示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*css代码比较混乱，大家不用在意这里*/
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            box-sizing: border-box;
        }
        .leftSide {
            display: flex;
            align-items: center;
            justify-content: center; 
            width: 50%;
            height: 300px;

            background-color: #bbb;
        }
        .rightSide {
            display: flex;
            align-items: center;
            justify-content: center; 
            float: right;
            width: 50%;
            height: 300px;
            background-color: #5bb;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="rightSide">
          <div id="myPage">

          </div>
    </div>
    <div class="leftSide">
            <ul>
                <li><a href="#/">默认 </a></li>
                <li><a href="#/blue"> 蓝</a></li>
                <li><a href="#/black">黑 </a></li>
            </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="./myRouter.js"></script>
</html>

(function() {
    class Router {
        constructor() {
            this.routes = {};
            this.currentUrl = "";
        }
        init() {
            window.addEventListener('load', () => this.refresh(), false);
            window.addEventListener('hashchange',() => this.refresh(), false);
        }
        refresh() {
            this.currentUrl = location.hash.slice(1) || "/";
            if (typeof this.routes[this.currentUrl] === 'function') {
                this.routes[this.currentUrl]();
            }else {
                this.routes["/404"]();
            }
        }
        route(path, callback) {
            this.routes[path] = callback;
        }
    };

    function changeView(str) {
        document.getElementById("myPage").innerHTML=str;
    }

    var router=new Router();
    router.init();
    router.route("/", () => changeView("<h1>默认页面</h1>"));
    router.route("/blue", () => changeView("<h1>blue页面</h1>"));
    router.route("/black", () => changeView("<h1>black页面</h1>"));
    router.route("/404",() => changeView("<h1>404    请求的页面不存在</h1>"));
})()

以上就是hash路由的最简单。最基本的实现；

最终的效果如下;通过点击不同的按钮，触发url中hash部分的改变，改变页面

前端路由跳转基本原理(代码片段)

目前前端三杰Angular、react、vue 都推介单页面应用SPA开发模式，在路由切换时替换DOMTree中最小修改的部分DOM，来减少原先因为多页应用的页面跳转带来的巨量性能损耗。它们都有自己的典型路由解决方案，@angular/router、react-ro... 查看详情

前端路由的原理

...由是根据不同的url地址展示不同的内容或页面使用场景？前端路由更多用在单页应用上,也就是SPA,因为单页应用,基本上都是前后端分离的,后端自然也就不会给前端提供路由。前端的路由和后端的路由在实现技术上不一样，但是... 查看详情

前端路由原理及vue-router介绍(代码片段)

前端路由原理本质就是监听URL的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式hashhistorywww.test.com/##/ 就是HashURL，当 ## 后面的哈希值发生变化时，不会向服务器... 查看详情

vue-router(代码片段)

...实的资源之间就有一种对应的关系，就是路由。路由分为前端路由和后端路由1.1后端路由后端路由是根据不同的用户URL请求，返回不同的内容，本质就是URL请求地址与服务器资源之间的对应关系。由服务器端进行实现，并完成资... 查看详情

vue路由的原理及模式(代码片段)

核心：更新视图不重新请求页面。路由的hash模式和history模式。看上去，hash模式就比history模式多了一个#。无论是hash模式还是history模式，在发生改变的时候，浏览器都会新增一个记录，我们就是通过这个记录来实现更新视图但... 查看详情

stp原理及基本配置

...些端口，来生成一个逻辑上的树形结构。配置目的：解决路由环路，实现负载均衡备注：现在的路由器不会产生环路，配置的主要目的是选择性能较好的交换机做根网桥实现负载均衡。工作原理： &n 查看详情

原生js实现一个简单的前端路由（原理）

说一下前端路由实现的简要原理，以hash形式（也可以使用HistoryAPI来处理）为例，当url的hash发生变化时，触发hashchange注册的回调，回调中去进行不同的操作，进行不同的内容的展示。直接看代码或许更直观。1functionRouter(){2this.ro... 查看详情

区块链基本原理(代码片段)

区块链基本原理区块链基本原理账本什么是账本实现账本的四大难点分布式账本解决难点1、难点2密码学解决难点3区块链数据结构解决难点4hash函数（SHA-256）hash函数的特性hash函数在形成区块链结构时的作用P2P网络简介共... 查看详情

vue的路由(代码片段)

Vue的路由前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时hash有一个特点:HTTP请求中不会包含hash相关的内容;所以，单页面程序中的页面跳转主要用hash实现。Vue-Router的基本使用<!DOCTYPEh... 查看详情

浅谈前端路由原理hash和history(代码片段)

浅谈前端路由原理hash和history🎹序言🎸一、前端路由原理1、SPA2、什么时候需要路由🎷二、Hash模式1、定义2、网页url组成部分（1）了解几个url的属性（2）演示3、hash的特点🎺三、History模式1、定义... 查看详情

哈希(hash)与加密(encrypt)的基本原理区别及工程应用

...。但是从文章评论中也可以看出很多朋友对这个方面一些基本概念比较模糊，这样就容易“照葫芦画瓢”，不能根据自身具体情况灵活选择和使用各种哈希和加密方式。本文不对查看详情

哈希(hash)与加密(encrypt)的基本原理区别及工程应用

...。但是从文章评论中也可以看出很多朋友对这个方面一些基本概念比较模糊，这样就容易“照葫芦画瓢”，不能根据自身具体情况灵活选择和使用各种哈希和加密方式。本文不对哈希和加密做过于深入的讨查看详情

前端路由原理(代码片段)

...端路由：早期传统MVC网站路由都是服务端主导，前端通过不同URL请求后端，后端框架有专门的路由模块用来匹配URL地址，然后根据不同地址和参数调用相关处理程序并返回html页面给前端。前端路由：后来前后... 查看详情

模糊pid基本原理及simulink仿真实现(代码片段)

模糊PID基本原理及Simulink仿真实现，向大佬致敬https://blog.csdn.net/qq_41913616/article/details/82020685以下未说明的都为转载内容转自https://blog.csdn.net/weixin_36340979/article/details/79168052在讲解模糊PID前，我们先要了解PID控制器的原查看详情

v-router路由基础(代码片段)

...由路由（英文：router）就是对应关系。2.SPA与前端路由SPA指的是一个web网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现... 查看详情

前置路由

在单页应用上，前端路由并不陌生。单页应用是指在浏览器中运行的应用，在使用期间页面不会重新加载。基本原理:以hash形式（也可以使用HistoryAPI来处理）为例，当url的hash发生改变时，触发hashchange注册的回调，回调中去... 查看详情

memecached缓存原理及基本操作分布式(一致性hash)

原文地址：http://lixiangfeng.com/blog/article/content/7869717转载请标明此处，谢谢！缓存是什么？为什么要使用缓存？缓存，通过在内存中缓存数据和对象来减少读取数据库的次数，从而提供动态、数据库驱动网站的速度。缓存工具有哪... 查看详情

ospf的基本原理及配置命令

...FOSPF基本原理以及邻居关系建立过程OSPF是一种链路状态型路由选择协议。它依靠5种(Hello,DBD,LSR,LSUandLSAck)不同种类的数据包来识别、建立和维护邻居关系。当路由器接收到来自邻居的链路状态信息后，会建立一个链路状态数据库... 查看详情