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

早期的路由都是后端实现的，直接根据 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部分的改变，改变页面

前端hash路由基本原理,及代码的基本实现的更多相关文章

  1. H5小技巧之——巧用<a>标签锚链接（#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接）

    #作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...

  2. 对一致性Hash算法，Java代码实现的深入研究

    一致性Hash算法 关于一致性Hash算法,在我之前的博文中已经有多次提到了,MemCache超详细解读一文中"一致性Hash算法"部分,对于为什么要使用一致性Hash算法.一致性 ...

  3. Javascript实现前端简单路由

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...

  4. 告别 hash 路由，迎接 history 路由

    博客地址:https://ainyi.com/69 三月来了,春天还会远吗.. 在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~ 映照官方说法 v ...

  5. 对一致性Hash算法，Java代码实现的深入研究(转)

    转载:http://www.cnblogs.com/xrq730/p/5186728.html 一致性Hash算法 关于一致性Hash算法,在我之前的博文中已经有多次提到了,MemCache超详细解读 ...

  6. 【转载】对一致性Hash算法，Java代码实现的深入研究

    原文地址:http://www.cnblogs.com/xrq730/p/5186728.html 一致性Hash算法 关于一致性Hash算法,在我之前的博文中已经有多次提到了,MemCache超详细 ...

  7. React SPA 应用 hash 路由如何使用锚点

    当我们在做 SPA 应用的时候,为了兼容老的浏览器(如IE9)我们不得不放弃 HTML5 browser history api 而只能采用 hash 路由的这种形式来实现前端路由,但是因为 hash ...

  8. HahsRouter hash 路由

    无刷新页面,切换视图,用hash 实现路由切换,本身附带history记录,简单舒服. 最近用vue,看到vue-route的路由,做单页应用切换视图真心易如反掌,分分钟爽到不行.为了加深理解其内涵原 ...

  9. hash路由

    class HashRouter{ constructor(){ //用于存储不同hash值对应的回调函数 this.routers = {}; window.addEventListener('ha ...

随机推荐

  1. odoo第三方市场 -- 模块推荐

    odoo 除了开源,另一个非常给力的地方就是,强大的第三方应用市场: 你入坑后,会发现非常的好玩,全球还有这么多小伙伴并肩前行,共同成长. 第三方市场有很多不错的模块,当然,好东西,不是完全免费的! ...

  2. numpy.random.randn()与numpy.random.rand()的区别（转）

    numpy中有一些常用的用来产生随机数的函数,randn()和rand()就属于这其中. numpy.random.randn(d0, d1, …, dn)是从标准正态分布中返回一个或多个样本值. n ...

  3. Firefox火狐 浏览器接口调试工具 JSON 格式化

    作为一名“IT界”的淫才,还是主攻Web端的淫才,相信大家经常会联调各种接口! 如今APP猖狂的年代接口联调更为频繁,当然我们常用于Firefox火狐 浏览器,所以这里主要讲Firefox火狐 浏览器 ...

  4. python特殊的数据类型

    lsit 列表是一种有序的数据集合,允许数据类型不一致! 1.定义:l=[1,"s",'2',True,u"您好"] 或者 l=list() 2.访问:l[0] ...

  5. MyBatis 注解配置

    Employee package com.example.demo.domain; import java.io.Serializable; public class Employee impleme ...

  6. 最大子数组问题/Maximum Subarray

    问题描述: Find the contiguous subarray within an array (containing at least one number) which has the la ...

  7. vue实现城市列表选择

    成果展示 最后的成果就是下面所展示的内容,因为gif图没有做,只能截图所展示,接下来,会带着大家一步一步的完成下面功能,脚手架搭建和node安装在本次案例不会讲解,如果了解,可以在我的博客园找到有详细 ...

  8. 使用GMap.NET类库，实现地图轨迹回放。(WPF版)

    前言 实现轨迹回放,GMap.NET有对应的类GMapRoute.这个类函数很少,功能有限,只能实现简单的轨迹回放.要实现更复杂的轨迹回放,就需要自己动手了. 本文介绍一种方法,可以实现复杂的轨迹回放 ...

  9. 散列算法－SHA

    一种生成信息摘要的算法.主要用于数据一致性和完整性的校验 SHA算法分很多版本,最大的分类是SHA-1和SHA-2.SHA-2包括很多子版本,SHA-224,SHA-256,SHA-384,SHA-5 ...

  10. Ceph 块设备 - 块设备快速入门

    目录 一.准备工作 二.安装 Ceph 三.使用块存储   一.准备工作 本文描述如何安装 ceph 客户端,使用 Ceph 块设备 创建文件系统并挂载使用. 必须先完成 ceph 存储集群的搭建,并 ...