window.location 处理哈希的改变时不会重新渲染页面,而是当作新页面加到历史记录中,这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。
分析
angular 1.x
的路由是直接引入html
文件的,所以从这一点逐步分析。
1、我们在angular 1.x
的路由中会看到 #
,这个 #
有两种意思,一种是锚点,也就是单页面跳转到具体的块div
;第二种也就是我们要说的,路由中的#
,路由里的 # 不叫锚点,我们称之为 hash,大型框架的路由系统大多都是哈希实现的。
2、根据监听哈希变化触发的事件 —— hashchange
事件
3、加载页面采用jquery.ajax()
的 load()
方法
开工
一:简单介绍load()
方法
index.html
1 | <div id="router"> |
同级目录下test.html
1
2
3
4
5
6
7
8
9<section>
<div>ss</div>
<div id="warp">11</div>
<div class="warp">22</div>
</section>
<script>
$('#router').css('color','red');
</script>
了解更多:ajax加载html文件
二:写入router
方法
router.js
1 | function Router(){ |
index.html
1 | <!DOCTYPE html> |
最终效果
这次只是做了一下hash
的,最新的history API
还不是很懂,等明白了再做一个history
版的,这样就不用看到不怎么友好的#
了!
代码: router(hash)
演示: 演示地址