单文件组件与Vue中的路由

1. 单文件组件

打开src目录下的main.js文件，整个项目的入口文件。main.js中的挂载点“#app”就是指的index.html中的ID等于app的div元素。

其中的

指的是在项目里用了一个局部组件App(后一个)，在外层的Vue实例中给这个组件也取名为App。ES6写法中如果键和值是一样的可以直接写成：

在模板里把App这个组件渲染出来，显示在页面上。

引入局部组件。以vue后缀结尾称为单文件组件。

2. 路由

就是根据网址的不同，返回不同的内容给用户。我们进入到App.vue中，其中显示的是当前路由地址所对应的内容;

而在main.js中，已经引入了路由变量：

进入该路径下的index.js:

然后看配置内容引入的是HelloWorld组件，所以最后页面渲染的是HelloWorld组件的内容。

3. 多页应用和单页应用

– 多页面应用：每一次跳转页面的时候，控制台服务器都会返回一个新的HTML文档。

优点
**首屏时间快：**即页面首个屏幕展现出来的时间，因为访问页面的时候，服务器就会返回一个HTML，然后页面就会被展示出来，这个请求只经历了一个http请求的过程，所以页面展示的速度会非常快。
**搜索引擎优化（SEO）效果好：**搜索引擎在做排名的时候，需要知道网页的内容，然后给你一个网页的权重，再进行一次排名。搜索引擎可以识别HTML的内容，我们每个页面的内容都放在HTML中，所以SEO效果好。
缺点：
每次跳转的时候，都会发送一个http请求，假设网络比较慢的时候，就会出现卡顿。

– 单页面应用：js会感知到URL的变化，用js动态地把当前页面清除掉，把下一个页面的内容挂载到页面上，是前端来做的，所以不用每次跳转的时候都请求http了。

优点
由于少了发送http请求的时延，所以页面切换快。
缺点
首屏时要额外加上对HTML的请求，所以时间稍慢；搜索引擎无法js渲染的内容，所以SEO要差。