单页应用跳转实现浅析-demo篇

最新推荐文章于 2023-11-10 11:29:15 发布

过8客

最新推荐文章于 2023-11-10 11:29:15 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html5 javascript 文章标签： javascript html5 hash

本文链接：https://blog.youkuaiyun.com/guo8ke/article/details/71080522

javascript 同时被 2 个专栏收录

23 篇文章

订阅专栏

html5

14 篇文章

订阅专栏

本文介绍了单页应用中页面跳转的实现方式，包括使用pushState、replaceState及location.hash等方法，并详细解释了如何捕获popstate和hashchange事件进行内容更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说道单页应用，首先要考虑到两个问题，即：怎样跳转，如何捕获。

怎样跳转？

在单页应用中跳转方式大概如下：

pushState 、 replacestate 这两个方法 和 location.href 、location.hash 两个属性。

如何捕获？

在单页应用中捕获页面跳转是很有必要的，因为实际上页面没有被刷新，只能通过事件捕获来触发展现内容的更新。捕获事件 popstate和hashchange。


首先我们把捕获跳转的方法写好，为了比较容易分析 popstate和 hashchang两个方事件我们都注册到页面上。

window.addEventListener('popstate', function(e) {
    console.log(history.state);
});


window.addEventListener('hashchange', function() {
    console.log(location.hash);
});
接下来location.href或location.hashfunction pushhs(){

    //location.href='a1';
    location.hash='a1';


    return false;
}
/*


在页面上调用pushhs()方法，大家会发现popstate和hashchange都会被调用。只是这个时候history.state为null。
在上面方法中用href和hash效果是一样的。


这样就实现了单页的跳转和跳转后事件的捕获。


但是大家会发现，这样的单页跳转只能是页面文件后面跟上的“#哈希值”在变化，那么打个比方，如果我不想用这个#。如果我想让页面文件名后面的方式不适用hash变化这种方式呢？

对那么我们就不能location跳转方式了。大家看下面方法：


*/

function pushhs1(){



    history.pushState({ 'page_id': 'a1'}, 'a1-title', '#a1');
   location.replace(location.href);    
   return false;
}

/*


上面方法中主要理解为什么要location.replace(location.href); 

原因就是pushstate的时候是不触发popstate的。   

在上面方法调用过程中大家会发现每一次跳转只处罚了popstate事件，这事需要注意的。

另外上面方法中的url的值参数我填的是 '#a1',大家可以改成你的页面地址文件名后 + "?a1"。大家会发现pushstate不局限于哈希值。

比较推荐使用pushstate方法。

*/