javascript - spa页面怎么操作历史前进后退?
巴扎黑
巴扎黑 2017-04-11 13:13:29
[JavaScript讨论组]

都知道spa(单页面应用)整站都在一个html页面实现,那么请问怎么实现后退前进功能?怎么保存页面某一状态(比如a块显示b块隐藏,或b块显示c块也显示等等)到url 发送给别人,别人打开也是你浏览的这种状态,而不是回到html页面初始状态。

巴扎黑
巴扎黑

全部回复(4)
阿神

SPA 和 URL 不变之间没有必然联系,所以分享给别人和普通的网站一样,分享地址即可。
新地址打开,那么按照地址初始化页面即可。
页面的切换,你可以先查查 history 相关的 API(例如 history.pushState),以及 popstate 事件。
这里没有答的比较详细,题主可以先查查资料,如果有后续问题,可以再问。

怪我咯

SPA各个功能页面是会在URL上体现出来的:

  • SPA的URL可以做到和传统URL一模一样,这种情况分享给别人和以往一样,直接分享那个页面的URL即可。

  • 还有一种的典型实现是使用“#”来区分单页应用中的各个功能页面,比如:

    • 个人信息页面: http://<yrdomain>/#profile

    • 修改密码页面: http://<yrdomain>/#chgpwd

    • 等等

  • 这两种情况典型的情况下,你所分享的功能页面得URL都是不一样的,所以直接分享即可

还要一个问题是前进和后退问题,如果不需要自己实现这些功能的话,默认情况下单页应用的url state和history已经被单页应用的router模块实现的很好了。

可以参考一下ui-router,他是angularjs和reactjs的前台路由实现:
https://ui-router.github.io/

阿神

spa页面并非只有一个url,url的变化可以通过hash或history接口去实现,只不过url变化时并不会真正从后台获取一次新的页面,而是路由监听了url的变化后根据url的不同请求后端不同的接口和进行不同组件的前端渲染。具体你可以看看这个单页应用https://jianliao.com/

巴扎黑

兄弟,你的问题解决了么?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号