h5前端路由相关知识

核心技术

1..AJAX异步加载数据

2.地址栏改变，却不重新加载页面

       2.1 哈希。即点击锚点，地址栏是会多一个#，却不会重新加载页面的

       2.2  H5新出的API:window.history.pushState及window.history.replaceState，可以修改history栈，从而修改当前地址栏，也不会重新加载页面

概念

前端路由是指：一般是在单页面下，选择性的选择显示某一部分内容（AJax），并且地址栏也随之变化（修改地址栏），这俩部分同时变化，让用户感觉是进入了一个新页面

哈希#

                               //设置锚点 ，对应vue中的  只不过vue配置了router，并且集中了路由出口

点击跳到a1锚点位置   //设置a标签，对应vue中的 点击跳到a1锚点位置

window.history.pushState及 window.history.replaceState

history相关API使用：

1.History.back()    后退按钮           //会刷新页面

2.History.forward()     前进按钮。  //会刷新页面

3.History.go(num)    跳转到某一页       //会刷新页面

4.location.reload(bool)    刷新   Bool值为false则从缓存加载，true则从服务器加载      //会刷新页面

5.location.replace(url)    更新当前回话       //会刷新页面

6. location.href = url; 获取href或者设置href     //会刷新页面

//前6个都会刷新页面，其实也就是我们浏览器的一些前进后退刷新等按钮的APi而已

//捕获页面是否被刷新（前6个都会导致页面刷新）的API：

window.onpopstate = function(event) {

        console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));

};

7.History pushState(obj,title,url)    在会话历史堆栈顶部插入一条记录     //不会刷新页面

8.History.replaceState(obj,title,url)    更新会话历史堆栈顶部记录信息      //不会刷新页面

区别

1.哈希#      优点：#后面内容，不会发送到服务器，对服务器不用修改配置。       缺点：地址栏出现#，不美观

2.window.history.pushState及 window.history.replaceState   优点：美观     缺点：地址栏修改，用户操作（刷新，前进后退）会导致该地址会加载页面，需要服务器支持（即      要有相关路径的网页）

补充-vue动态路由，保存滚动条位置

其实就是根据地址，正则表达式，选择要加载的板块即可。

History.scrollRestoration  允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。

History.state  读取 历史堆栈顶部的状态的值