单文件组件与Vue中的路由

打开Vue默认项目夹，然后进入到main.js里面，它是整个项目的入口文件

el表示挂载到id等于app的元素上

然后再点开index.html文件当中

这个Vue就是挂载到这个div上

components: { App } 等于 components: { App ：APP }，就是定义一个局部组件的使用，这是一种es6的写法，当你键和值一样的时候，写一个就可以了，App其实就是一个定义好的局部组件

template: '<App/>' 把App这个局部组件显示到页面上

那么，这个APP局部组件在哪呢，

从当前目录中的App中查找

虽然写的是App但是Vue会自动去找没有App.vue或者App.js之类的

打开App.vue

一共有三个部分，分别为template，script，style

Vue当中，当以vue为后缀名的文件，我们叫做单文件组件，里面实际放的就是一个Vue的组件

组件的模板放在template里面，组件的逻辑放在script里面，组件的css放在style里面

我们先来运行一下这个Vue项目

我们就可以通过localhost:8080访问了

我们把App.vue里面删除一点东西

然后再去页面上看，发现变成这样了

说明App.vue里面确实是我们想要显示的内容

但是这些文字是怎么回事呢？

这其实就是路由在作用

路由就是根据网址的不同，返回不同的内容给用户

比如：用户访问：，返回一个主页面，

放用户访问，返回一个列表页面

拿http://localhost:8080/#/举例

如果我们把路由注释掉

发现页面上就只有这个logo了

说明当前路由的地址就是http://localhost:8080/#/，那么对应的内容存储到哪里了呢？

那么我现在就想主页显示一个home字符串：

再添加一个list路由