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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了详解单页面路由的几种实现原理相关的知识,希望对你有一定的参考价值。

路由是每个单页面网站必须要有的,本篇基本不会天贴代码,只讲原理,代码在页面底会有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一样,但是也有缺点,就是一刷新页面,页面就会丢

 


以上是关于详解单页面路由的几种实现原理的主要内容,如果未能解决你的问题,请参考以下文章

单页面路由实现原理-history

单页面路由实现原理-hash

浅入浅出前端单页面路由实现原理

关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

vue路由原理

快速排序的几种实现方式