原生js实现路由（初级篇）

wdzgege 发布于2019-08-26 18:38 / 2590人阅读

摘要：整个路由的核心连接点是的值，监听器负责监听值的变化。当值发生改变的时候，去路由表中去查询，将与当前匹配的页面作为路由出口的内容。去路由表中查找与对应的页面，将这种页面替代原来的路由出口内容。

设计思路

路由跳转最常见的形式是通过a标签，当a标签被点击的时候，将a标签中对应的路径值赋值给hash。
整个路由的核心连接点是hash的值，hash监听器负责监听hash值的变化。
当hash值发生改变的时候，去路由表中去查询，将与当前hash匹配的html页面作为路由出口的内容。

首先看html代码

这里的content就是路由出口，当点击不同的a标签时，content内部展示的内容也不同。

其次看a标签上绑定的事件

        const links = document.querySelectorAll("a");
        links.forEach(function (link) {
            link.addEventListener("click", function (ev) {
                ev.preventDefault();
                const href = this.getAttribute("href");
                window.location.hash = href;
            });
        });

当a标签被点击时，禁止a标签的默认行为。然后将a标签的href的值赋给window.location.hash。
可以看到此时浏览器的地址栏发生更新。

如果到此为止，那么页面不会发生更新，仅仅只是location的hash的值发生改变。

最后当hash发生改变时，页面也该更新。去路由表中查找与hash对应的页面，
将这种页面替代原来的路由出口内容。

        window.addEventListener("hashchange", function () {
            const outer = document.querySelector("#content");
            const hash = window.location.hash;
            const route = routes.find(function (route) {
                return hash === "#" + route.path;
            });
            outer.innerHTML = route && route.component || "Error";
        });

完整的代码可以从我的github 获取完整代码，觉得可以的话，可以点个赞。

私有云 idc机房托管原生js实现 ajax原生js实现原生js实现addclass 原生js实现ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110309.html

【开发经验】浅谈flutter的优点与缺点

摘要：我对于原生开发与基于的开发比较熟悉，并在一个正在进行的蓝牙硬件项目中应用了框架，经历的漫长的适应，在本文中我将以原生开发者与开发者的视角看待框架，简单罗列的优势与缺点。本文默认你已经是开发者，并对Flutter有基本的了解，但是还未深入使用，希望了解Flutter在商业级（而非demo）的项目中的优势与劣势。很多前端开发者应该都寻找过跨平台的App解决方案，包括没有同时独立开发iO...

fengxiuping 2019-06-25 17:02 评论0 收藏0
前端最强面经汇总

摘要：获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码，也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素，方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 别只收藏，点个赞，点个star再走哈~ 持续更新中……，可以关注下github 项目地址 https:...

wangjuntytl 2019-08-26 10:41 评论0 收藏0
Amaple.js框架详细介绍

摘要：体验优先的单页框架点此查看仓库是专为单页应用而设计的基于页面模块化的框架，它可使开发者快速开发单页应用。使用前置要求此框架的使用者可不需了解构建工具，但必须掌握和的基础知识。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 体验优先的JavaScript单页框架 Amaple (点此查看Github仓...

loonggg 2019-08-30 13:52 评论0 收藏0
Amaple.js框架详细介绍

摘要：体验优先的单页框架点此查看仓库是专为单页应用而设计的基于页面模块化的框架，它可使开发者快速开发单页应用。使用前置要求此框架的使用者可不需了解构建工具，但必须掌握和的基础知识。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 体验优先的JavaScript单页框架 Amaple (点此查看Github仓...

songze 2019-08-05 12:50 评论0 收藏0
Amaple.js框架详细介绍

摘要：体验优先的单页框架点此查看仓库是专为单页应用而设计的基于页面模块化的框架，它可使开发者快速开发单页应用。使用前置要求此框架的使用者可不需了解构建工具，但必须掌握和的基础知识。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 体验优先的JavaScript单页框架 Amaple (点此查看Github仓...

imingyu 2019-08-01 18:27 评论0 收藏0