路由无刷新实现方法

前端路由主要实现了两个功能

1.记录当前的页面，打开什么样，复制连接再打开还是什么样

2.页面可以前进和后退

 

 

有2中方法可以实现

 

第一种 hash模式

http://www.test.com#param1

#param1这个就是hash，也叫锚点，用来做页面定位用。hash的更改会触发hashchange

window.location.hash = 'param1';
var hash = window.location.hash;
window.addEventListener('hashchange', function(){ 
    // 监听hash变化，点击浏览器的前进后退会触发
},false)
或者
<a name="print" href="#param1">

　　

第二种 html5的history

html5的history兼任到ie10，但是可以记录的数据比较多。不会有#这个标志

window.history.back() // 后退
window.history.forward() // 前进
window.history.go(1) // 前进一步，-2为后退两步，window.history.lengthk可以查看当前历史堆栈中页面的数量

　

window.history.pushState({page: 1}, "title 1", "?page=1");

window.history.replaceState(state, title, url)
// 与 pushState 基本相同，但她是修改当前历史记录，而 pushState 是创建新的历史记录


window.addEventListener("popstate", function() {
    // 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发              
});

　　

 

其他的参考

location参数值

// 当前URL的协议，包括 :; 比如 https:     
location.protocol   

/* 主机名和端口号，如果端口号是80(http)或443(https), 那就会省略端口号，比兔 www.baidu.com:8080 */
location.host  

/*主机名*/
location.hostname

/*端口号*/
location.port

// url的路径部分，从 / 开始; 比如 https://www.baidu.com/s?ie=utf-8，那么 pathname = '/s'了
location.pathname


// 查询参数，从?开始；比如 https://www.baidu.com/s?ie=utf-8 那么 search = '?ie=utf-8'
location.search

// hash是页面中的一个片段，从 # 开始的，比如 https://www.baidu.com/#/a/b 那么返回值就是："#/a/b"
location.hash