详解单页面路由的几种实现原理

路由是每个单页面网站必须要有的,本篇基本不会天贴代码,只讲原理,代码在页面底会有github地址,注意,一定要放在本地服务器里跑(因为有AJAX)

众所周知,单页面网站的路径跳转全是通过JS来控制的,下面说说

第一种:URL完全不动型

这一种的情况是URL完全不动,即你的页面怎么改变,怎么跳转URL都不会改变,这种情况的原理就是纯AJAX拿到页面后替换原页面的元素,这种情况没什么好说的,demo在最底下

第二种:带hash(#)型

这种类型的优点就是刷新页面,页面也不会丢

实现原理:

小明说:如果window有一个事件能让我监听URL的变化,那我就能实现路由,那样我就可以根据URL的变化,来通过AJAX请求参数来渲染页面,一个URL对应一个页面,也不会重复,多好!

我:还真有,但是只能监听  #后面参数的变化

小明:唉,那就凑合一下吧

通过监听hash(#)的变化来执行JS代码  从而实现页面的改变

核心代码:
window.addEventListener(‘hashchange‘,function(){

  self.urlChange()

})

就是通过这个原理 只要#改变了 就能触发这个事件,这也是很多单页面网站的URL中都也(#)的原因

第三种:无hash(#)型

这种类型是通过html5的最新history api来实现的,能正常的回退前进,很好 URL是这样的 www.ff.ff/jjkj/fdfd/fdf/fd  和普通的URL一样,但是也有缺点,就是一刷新页面,页面就会丢

时间: 2024-11-05 13:29:44

详解单页面路由的几种实现原理的相关文章

详解单页面路由的几种实现原理(附demo)

前言 路由是每个单页面网站必须要有的,所以,理解一下原理,我觉得还是比较重要的. 本篇,基本不会贴代码,只讲原理,代码在页底会有githup地址,主意,一定要放在服务本地服务器里跑(因为有ajax), 希望能帮到你. 众所周知单页面网站的路径跳转全是通过js来控制的,下面咱们来讲讲 第一种:url完全不动型 这一种的情况是url完全不动,即你的页面怎么改变,怎么跳转url都不会改变 这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素, 这种情况没什么好讲的,好的一言不和上代码    de

js中window对象详解以及页面跳转

js中window对象详解以及页面跳转 转自:http://www.makaidong.com/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%90%9C/39219.shtml 1.window.top.window.location = "index.asp"; 2.window.top.location.href="index.asp" 3. window.top.location.replace("index.asp");

POI操作Excel详解,HSSF和XSSF两种方式

HSSF方式: package com.tools.poi.lesson1; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import java.text.ParseException; import java.text.SimpleDateFormat; import java.

详解Java解析XML的四种方法

(1)DOM解析 DOM是html和xml的应用程序接口(API),以层次结构(类似于树型)来组织节点和信息片段,映射XML文档的结构,允许获取 和操作文档的任意部分,是W3C的官方标准 [优点] ①允许应用程序对数据和结构做出更改. ②访问是双向的,可以在任何时候在树中上下导航,获取和操作任意部分的数据. [缺点] ①通常需要加载整个XML文档来构造层次结构,消耗资源大. [解析详解] ①构建Document对象: DocumentBuilderFactory dbf = DocumentBu

Java学习之道:详解Java解析XML的四种方法

XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便.对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这里面包括的内容有DOM(Document Object Model),DTD(Document Type Definition),SAX(Simple API for XML),XSD(Xml Schema Definition),XSLT(Extensible Stylesheet Language Transform

【Java】详解Java解析XML的四种方法

XML现在已经成为一种通用的数据交换格式,平台的无关性使得很多场合都需要用到XML.本文将详细介绍用Java解析XML的四种方法. AD: XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便.对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这里面包括的内容有DOM(Document Object Model),DTD(Document Type Definition),SAX(Simple API for XML),XS

详解ASP.NET4 GridView的四种排序样式

与ASP.NET 的其他Web控件一能够,Gridview控件拥有很多不同的CSS样式属性设置,包括象CssClass,Font字体,ForeColor,BackColor,BackColor, Width, Height等等.Gridview还包括了一些应用在表格的行上的样式属性,比如RowStyle, AlternatingRowStyle, HeaderStyle,和PagerStyle,它们都提供了象CssClass和Font这些基本的属性设置. 在ASP.NET 4.0中的Gridvi

详解 MySql InnoDB 中的三种行锁(记录锁、间隙锁与临键锁)

详解 MySql InnoDB 中的三种行锁(记录锁.间隙锁与临键锁) 前言 InnoDB 通过 MVCC 和 NEXT-KEY Locks,解决了在可重复读的事务隔离级别下出现幻读的问题.MVCC 我先挖个坑,日后再细讲,这篇文章我们主要来谈谈那些可爱的锁. 什么是幻读? 幻读是在可重复读的事务隔离级别下会出现的一种问题,简单来说,可重复读保证了当前事务不会读取到其他事务已提交的 UPDATE 操作.但同时,也会导致当前事务无法感知到来自其他事务中的 INSERT 或 DELETE 操作,这就

【PPT详解】曹欢欢:今日头条算法原理

[PPT详解]曹欢欢:今日头条算法原理 悟空智能科技 4月8日 公众号后台回复:"区块链",获取区块链报告 公众号后台回复:"sq",进入区块链分享社群 热文推荐: 1000位专家推荐,20本区块链必读书籍(附PDF) 中国首个区块链标准<区块链参考架构>发布 今天,算法分发已经是信息平台.搜索引擎.浏览器.社交软件等几乎所有软件的标配,但同时,算法也开始面临质疑.挑战和误解.今日头条的推荐算法,从2012年9月第一版开发运行至今,已经经过四次大的调整和