多页面应用与单页面应用

image.png

image.png

什么是多页面应用？看这两个图片，每一次页面跳转的时候，后台的服务器都会给我们返回一个新的HTML文档，这种类型的网站就是多页面网站，或者称之为多页面应用。

image.png

当我们使用多页面应用的时候，每一次页面的跳转，后端都会返回一个新的HTML文件。

这就带来了一些优点：1、页面首个屏幕展示所需的时间很短：当访问一个页面的时候，服务器返回一个HTML文件，然后页面就会被展示出来，这个只经历了一个HTTP请求的过程，所以页面展示的速度会很快，请求回来，页面也就展示出来了；2、搜索引擎优化（SEO）效果非常好：搜索引擎进行排名的时候，是看网页的内容的，搜索引擎是可以识别HTML中的内容，我们每个页面的内容都是放在HTML中，这样的话，内容都可以被搜索引擎来使用，排名的效果就非常好了。
多页应用也有缺点：页面切换慢。因为每一次跳转页面的时候，都需要发一个HTTP请求。这样，当网速比较慢的时候，当我们在不同页面切换的时候，就能感觉到明显的卡顿。
单页面应用

图片.png

这是首页的代码，显示如下：

图片.png

现在希望在首页这个代码中做一个调整，让其可以跳转到list页面，做页面跳转的时候，一般不用a标签跳转，用router-link标签来进行跳转，和a标签使用类似，标签内写的是在页面中显示的字，标签中的to属性类比于标签a中的href属性：

图片.png

因为template标签内与之暴露的只能是一个标签，所以添加了一对div标签。

我们使用vue写的是单页应用。当我们第一次进入页面的时候，会请求一个HTML文件：

图片.png

当我进入列表页的时候，并没有再请求一个HTML文件；当再回到首页的时候，依然不会请求HTML文件。这是怎么做到不请求HTML文件，页面会跟着变化呢？
是因为JS会感知到URL的变化。用js动态地把当前页面的内容清除掉，再把下一个页面的内容挂载到页面上，这时这个路由是由前端来做，这个过程就不用每次页面跳转都请求HTML文件了
单页应用的优缺点：

图片.png

1、当使用单页应用来进行页面跳转的时候，页面的每次跳转并不是加载HTML文件，而是通过JS动态地把当前页面的内容给删除掉，再去把新页面上的DOM结构给渲染出来。这样就带来了页面切换的时候，速度很快；但是也会有些缺点：首屏时间稍慢。因为单页应用，首屏展示出来，需要去请求一次HTML，同时还需要发一次JS的请求，两个请求都回来了，首屏才会展示出来。
2、SEO（搜索引擎优化效果）差
搜索引擎只认识HTML中的内容，不认识JS中的内容，单页应用所有的页面内容都是靠JS渲染形成的，所以搜索引擎识别不了这块的内容，也就不会给一个好的排名。
vue中还有其他技术，通过这些技术可以避开单页应用的缺点。使单页应用成为一个不错的应用