多页应用

每次页面跳转,后台的服务器都会给我们返回一个新的HTML文档

vue单页应用架构设计怎么写 vue单页应用和多页应用_页面切换


首页时间快:页面首个屏幕的内容展现出来的时间 =》因为访问一个页面,服务器返回一个HTML,页面就会被展示出来,这个过程只经历了一个 http请求的过程SEO效果好: 搜索引擎优化效果非常好,搜索引擎在做排名的时候,需要知道网页的内容,根据网页的内容才会给网页权重来进行网页的排名。搜索引擎可以识别HTML中的内容,而每个页面的所有内容都放在HTML中,所以搜索引擎排名效果非常好

页面切换慢:因为每次跳转页面都需要发一个http请求,假设网络比较慢的时候,页面之间来回跳转就会有明显的卡顿情况

单页应用Vue

Js会感知到URL的变化,可以用JS动态的把当前页面的内容清除掉,再把下一个页面的内容挂载到页面上

这个时候的路由不是后端来做,而是前端来做

不会每次跳转都去请求HTML文件了

vue单页应用架构设计怎么写 vue单页应用和多页应用_Vue_02


页面切换快:当页面做跳转的时候, 不需要做HTML页面的请求,这样就节约了很多http请求发送的时延,页面之间的切换就会变得非常快首屏时间稍慢=》请求一次HTML,同时还要发一个JS请求,两个请求都回来了,首屏才会展示出来。相对于多页应用首屏时间稍慢

搜索引擎只认识HTML中的内容,但不认识JS中的内容,而单页应用内所有页面的内容都是靠Js渲染生成的,所有搜索引擎就不能识别这块的内容,就不会给网页一个好的排名。这样就会导致单页应用做出来的网页在百度,谷歌上的搜索中,排名效果会比较差

vue提供了服务器渲染等技术,通过这些技术可以完美的解决掉单页面应用中的缺点

  1. vue中的页面跳转:
    列表页
  2. template内只能包含一个根标签

首屏、SEO ==》 SSR解决 ==》