扫码关注官方订阅号
都知道spa(单页面应用)整站都在一个html页面实现,那么请问怎么实现后退前进功能?怎么保存页面某一状态(比如a块显示b块隐藏,或b块显示c块也显示等等)到url 发送给别人,别人打开也是你浏览的这种状态,而不是回到html页面初始状态。
SPA 和 URL 不变之间没有必然联系,所以分享给别人和普通的网站一样,分享地址即可。新地址打开,那么按照地址初始化页面即可。页面的切换,你可以先查查 history 相关的 API(例如 history.pushState),以及 popstate 事件。这里没有答的比较详细,题主可以先查查资料,如果有后续问题,可以再问。
history
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/
兄弟,你的问题解决了么?
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
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/
兄弟,你的问题解决了么?