首页 > 其他分享> 文章详细

路由无刷新实现方法

2019-08-15 14:01:27 阅读：141 来源： 互联网

标签：www hash com window location 刷新方法路由 history

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

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

标签：www,hash,com,window,location,刷新,方法,路由,history
来源： https://www.cnblogs.com/chenyi4/p/11357536.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

路由无刷新实现方法