单页应用的优点:

>快速。不需要发送请求、重新加载html/js/css。只有页面的数据需要重新拉取。另外,vue支持替换组件时保存旧组件的状态。

>更好的使用体验。用户不需要等待加载时空白的网页。可以添加过渡效果。例如,有的单页网站在切换页面时会有炫酷的进度条。

缺点:

>不利于搜索引擎排名(因为没有真正发请求)。

>没有浏览历史记录。但可通过js模拟。

>服务器在传任何数据前需要检查用户权限(cookie)。

https://rubygarage.org/blog/single-page-app-vs-multi-page-app

单页应用的通用模式:

每个页面都是一个组件。登陆、注册是弹出的小窗体而不是单独的网页。

网页主体是一个固定的组件。通过动态替换这个组件达到跳转页面的效果。

网页主体组件上方是页眉导航组件。

>动态替换组件:https://vuejs.org/v2/guide/components-dynamic-async.html

为了模拟加载新页面的历史记录效果,需要将旧的url推入历史记录并修改url,并且用户返回旧的历史记录时不应重新加载旧的组件。

可以通过监听url将跳转新页面的行为改成替换组件。

https://stackoverflow.com/questions/46402809/vuejs-event-on-route-change

通过监听返回/前进键,恢复url。

https://stackoverflow.com/questions/47974777/can-i-handle-back-button-within-methods-in-vuejs-2

Logo

前往低代码交流专区

更多推荐