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

Posted 2020-09-21

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