js实现hash路由原理

一、简单的上下布局,点击左侧导航,中间内容跟对变化,主要技术使用js检测路由的onhashchange事件

效果图
在这里插入图片描述

二、话不多说,直接上代码

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>hash路由原理</title><style>body,html {margin: 0;width: 100%;height: 100%}.header {margin-left: 200px;height: 50px;line-height: 50px;text-align: center;font-size: 26px;box-shadow: 0 1px 4px #32598913;}.layout {height: calc(100% - 50px);}.layout>.layout_sidebar {position: fixed;left: 0px;top: 0px;bottom: 0px;width: 200px;height: 100%;z-index: 10;background: #001529;}.layout_sidebar>a {display: block;height: 50px;display: flex;justify-content: center;align-items: center;text-decoration: none;color: #cecece;border-bottom: 1px solid rgba(129, 129, 129, 0.3);}.layout>.layout_main {margin-left: 200px;padding: 16px;}#main {height: calc(100% - 60px);width: calc(100% - 200px);background: #198;margin-left: 200px;}</style>
</head><body><div class="header">hash 路由原理</div><div class="layout"><div class="layout_sidebar"><a href="#/">默认页面</a><a href="#/a">页面一</a><a href="#/b">页面二</a><a href="#/c">页面三</a><a href="#/d">页面五</a><a href="#/e">页面六</a><a href="#/f">页面七</a><a href="#/g">页面八</a></div><div class="layout_main"><div id="com_page"><b>默认值</b></div></div></div><script>// 对应的页面组件内容数据let router = [{path: '/',component: "<b>默认页面</b>"},{path: '/a',component: "<b>页面一页面一页面一页面一</b>"},{path: '/b',component: "<b>页面二页面二页面二页面二</b>"},{path: '/c',component: "<b>页面三页面三页面三页面三</b>"},{path: '/d',component: "<b>页面五页面五页面五页面五</b>"},{path: '/e',component: "<b>页面六页面六页面六页面六</b>"},{path: '/f',component: "<b>页面七页面七页面七页面七</b>"},{path: '/g',component: "<b>页面八页面八页面八页面八</b>"}]window.onload = function () {let hashRouter = {path: "/"}hashRouter.init = function (hash) {// 获取路径let path = hash.substring(1)// 查到对应的路径router.map(function (el, index) {if (path == el.path) {return loadContent(el.component)}})}// 加载对应的内容function loadContent(con) {document.getElementById("com_page").innerHTML = con}// 初始化执行hashRouter.init(location.hash)// 监听hash被改变window.onhashchange = function () {hashRouter.init(location.hash)}}</script>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/757493.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FPGA控制AD7606_AD7606解读

目录 一、AD7606解读二、引脚说明三、时序图 一、AD7606解读 AD7606特点&#xff1a; 8通道同步采样模拟通道数为8分辨率&#xff1a;16bit&#xff0c;即最小采样的电压为5V/(2^16) 0,00007V&#xff0c;即数字量的1就代表模拟量的0,00007V&#xff0c;2代表0,00014V有效位数…

C语言易错知识点

1、数组长度及所占字节数 char x[] {"Hello"},y[]{H,e,l,l,o}; x数组的长度为5&#xff0c;y的长度也是5 x、y数组所占字符串为6为 51(\0)6 strlen&#xff08;&#xff09;函数得到的是数组的长度 2、%%与%的优先级 #include<stdio.h> int main(){ int a…

iOS图片占内存大小与什么有关?

1. 问&#xff1a;一张图片所占内存大小跟什么有关&#xff1f; 图片所占内存大小&#xff0c;与图片的宽高有关 我们平时看到的png、jpg、webp这些图片格式&#xff0c;其实都是图片压缩格式。通过对应的算法来优化了大小以节省网络传输与本地保存所需的资源。 但是当我们加…

再谈EMC Unity存储系统内存DIMM问题

以前写过一篇关于EMC Unity 存储系统的DIMM的介绍文章&#xff0c;但是最近还是遇到很多关于内存的问题&#xff0c;还有一些退货&#xff0c;所以有必要再写一篇关于EMC Unity 内存方面的问题&#xff0c;供朋友们参考。如果还有疑问&#xff0c;可以加vx&#xff1a;StorageE…

【黑马头条】-day01环境搭建SpringBoot-Cloud-Nacos

文章目录 1 环境搭建及简介2 项目介绍2.1 应用2.2 业务说明2.3 技术栈2.4 收获2.5 大纲 3 Nacos准备3.1 安装Nacos 4 初始工程搭建4.1 环境准备4.1.1 导入项目4.1.2 设置本地仓库4.1.3 设置项目编码格式 4.2 全局异常4.2.1 自动装配 4.3 工程主体结构 5 登录功能开发5.1 需求分…

logrus包学习(一)

个人学习记录&#xff0c;写下来备用 logrus是golang的结构化日志包 一、创建一个实例 logger : logrus.New() 当然你也可以直接使用&#xff0c;我个人习惯实例化一下 二、设置格式 个人习惯使用json logger.SetFormatter(&logrus.JSONFormatter{TimestampFormat: …

echart多折线图堆叠 y轴和实际数据不对应

当使用 ECharts 绘制堆叠折线图时&#xff0c;有时会遇到 y 轴与实际数据不对应的问题。 比如明明值是50&#xff0c;但折线点在y轴的对应点却飙升到了二百多 解决办法&#xff1a; 查看了前端代码发现在echart的图表中有一个‘stack’的属性&#xff0c;尝试把他删除之后y轴的…

2020.9.8C++Primer学习笔记————模板函数

CPrimer学习笔记————模板函数 看CPrimer看到了第十章函数模板部分&#xff0c;其中提到了模板函数用法&#xff0c;帮助强类型语言减少简单方法的代码量。 C是强类型语言&#xff0c;在调用方法时需要对传参有严格的判断&#xff0c;例如实现一个简单的大小判断方法时&am…

算法体系-11 第十一节:二叉树基本算法(上)

一 两链表相交 1.1 题目描述 给定两个可能有环也可能无环的单链表&#xff0c;头节点head1和head2。请实现一个函数&#xff0c;如果两个链表相交&#xff0c;请返回相交的 第一个节点。如果不相交&#xff0c;返回null 【要求】 如果两个链表长度之和为N&#xff0c;时间复杂…

静电无处不在:揭秘液晶显示屏静电防护的“大师级“策略

静电&#xff0c;仿佛是电子产品制造过程中的隐形杀手&#xff0c;尤其对于液晶显示屏等精密电子元器件的影响更是不可小觑。然而&#xff0c;面对这一挑战&#xff0c;有些制造商采取了一系列超越寻常的静电防护措施。今天&#xff0c;我们将揭开他们的"大师级"策略…

利用Android studio 查看模拟器中数据文件

打开Android studio &#xff0c;然后按照下图选择 然后会在右侧打开一个这样子的管理弹窗 找到 data/data/your project file 你的缓存跟下载的文件就都在里面了

【C++】每日一题 219 最小栈

设计一个支持 push &#xff0c;pop &#xff0c;top 操作&#xff0c;并能在常数时间内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初始化堆栈对象。 void push(int val) 将元素val推入堆栈。 void pop() 删除堆栈顶部的元素。 int top() 获取堆栈顶部的元素。 int…

BigDecimal保留两位小数失败问题

文章目录 背景问题解决如何测试代码 背景 测试时发现在线swagger测试会自动处理BigDecimal小数点后面的数字&#xff0c;就是有零的会都给你去掉&#xff0c;比如9.000与9.500到最后都会被swagger处理成9跟9.5。使用postman测是最准的&#xff0c;测出来的就是9.000跟9.500。 …

数据库基本内容与安装MySQL数据库

目录 一.数据库基本内容 1.数据 &#xff08;1&#xff09;描述事物的符号记录 &#xff08;2&#xff09;包括数字&#xff0c;文字、图形、图像、声音、档案记录等 &#xff08;3&#xff09;以“记录”形式按统一的格式进行存储 2.表 &#xff08;1&#xff09;将不同…

Java SE 22 新增特性

Java SE 22 新增特性 作者&#xff1a;Grey 原文地址&#xff1a; 博客园&#xff1a;Java SE 22 新增特性 CSDN&#xff1a;Java SE 22 新增特性 源码 源仓库: Github&#xff1a;java_new_features 使用未命名的变量和模式 我们经常需要定义一些我们根本不需要的变量…

【Linux】基础 IO(动静态库)-- 详解

一、前言 为什么要使用别人的代码&#xff1f; 主要是为了提高程序开发的效率和程序的健壮性。 当别人把功能都实现了&#xff0c;然后我们再基于别人的代码去做二次开发&#xff0c;那么效率当然就提高了。其次&#xff0c;这里基于的别人当然不是随便找的一个人&#xff0c;…

[Qt学习笔记]Qt鼠标事件mouseMoveEvent实时获取图像的坐标和像素值

目录 1、介绍2、效果展示3、实现过程3.1 图像的加载和显示3.2 设置鼠标跟踪事件激活3.3 实现代码 4、源码展示 1、介绍 上一篇介绍了使用OpenCV的setMouseCallback回调函数实现获取鼠标点击点的图像坐标和像素值&#xff0c;本篇使用鼠标事件mouseMoveEvent函数来实现实时获取…

OPPO 后端二面,凉凉。。。

美众议院通过 TikTok 法案 之前我们讲了 老美要求字节跳动在 165 天内剥离短视频应用 TikTok&#xff0c;当时的最新进度是 TikTok 给 1.7 亿美国用户发弹窗&#xff0c;发动用户群众给国会打电话进行抗议。 但显然这点力度的抗议并不会造成什么实质影响。 昨晚&#xff0c;美国…

精读《useRef 与 createRef 的区别》

1 引言 useRef 是常用的 API&#xff0c;但还有一个 createRef 的 API&#xff0c;你知道他们的区别吗&#xff1f;通过 React.useRef and React.createRef: The Difference 这篇文章&#xff0c;你可以了解到何时该使用它们。 2 概述 其实原文就阐述了这样一个事实&#xf…

【EDSR】《Enhanced Deep Residual Networks for Single Image Super-Resolution》

CVPR workshops-2017 首尔大学 code&#xff1a; https://github.com/limbee/NTIRE2017/tree/masterhttps://github.com/sanghyun-son/EDSR-PyTorch 文章目录 1 Background and Motivation2 Related Work3 Advantages / Contributions4 Method4.1 Residual blocks4.2 Single…