单页面应用简单实现

路由是每个单页面应用必须要有的,以下介绍几种路由实现方式:

1、url完全不动型

这一种情况是url完全不动,即你的页面怎么改变,怎么跳转url都不会改变;

这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素。

2、带hash(#)型

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

window.addEventListener(‘hashchange‘,function(){

self.urlChange()

})

只要#改变了,即可触发,这也是很多单页面网站的url都带#的原因。

3、无hash(#)型

这种类型是通过html5的最新history api来实现的,能正常的回退前进。

url是这样的www.ff.ff/jjkj/fdfd/fdf/fd和普通的url一样,但是也有缺点,就是一刷新页面页面就会丢,因为只要刷新这个url(www.ff.ff/jjkj/fdfd/fdf/fd)就会请求服务器,然而服务器上根本没有这个资源,所以就会报404,解决方案就 配置一下服务器端(可以百度一下)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容