Vue中的SPA

SPA: Single Page Application(单页应用程序)

概念:就是只有一个Web页面的应用,是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序。

与传统多页面程序的区别:

    传统多页面程序:每次请求服务器返回的都是一个完整的页面

    单页应用程序:只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中

优势:

    1 减少了请求体积,加快页面响应速度,降低了对服务器的压力

    2 更好的用户体验,让用户在web app感受native app的流畅

缺点:

    因为技术使用了ajax,导致页面不利于SEO,但是可以通过其他技术去规避

  (SEO原则:搜索引擎的蜘蛛只识别href的一般超链接,而不识别JavaScript代码,遇到一般超链接就会爬进去,遇到JavaScript不会爬进去。即,搜索引擎抓不到AJAX动态加载的内容。)

        1)服务端渲染  2)页面静态化(专门为爬虫准备的)

主要技术点:

    1 ajax

    2 锚点的使用(window.location.hash #)

    3 hashchange 事件

实现思路:

    监听锚点值变化的事件,根据不同的锚点值,请求相应的数据

        1 锚点(#)原本用作页面内部进行跳转,定位并展示相应的内容

        2 SPA中,锚点被用作请求不同资源的标识,请求数据并展示内容

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,482评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,169评论 19 139
  • 看来你的年纪也有四十出头了 这四十多年 总有些事情你是不愿意再提 有些人也不想再见 有个人曾经对不起你 也许你想过...
    野马_天阅读 3,207评论 0 0
  • 小时候,多么希望一夜变老,却发现时光那么慢,自己变老的速度什么时候能加快些,好能主宰自己的命运,想吃什么,想要什么...
    珍惜20202阅读 1,279评论 0 0
  • 转自Tensorflow slim库使用小记 看fensorflow的书发现使用的是slim库,那就要研究slim...
    永远学习中阅读 14,889评论 4 4

友情链接更多精彩内容