路由是每个单页面网站必须要有的,本篇基本不会天贴代码,只讲原理,代码在页面底会有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