手把手教你VUE从入门到放弃—— 篇二十四（vue中的单文件组件与路由）

小知识点:

ES6语法中， object:object 可以简化写作为 object

单文件组件

我们打开上一篇创建的vue项目的其中一个文件，这里打开的是App.vue

以.vue为后缀的这个文件就是一个单文件组件，与我们之前看到一些组件的定义不同，我们可以看到此组件有三个部分

（1）第一部分 template就是我们以前一样的用法，就是组件的模板

  (2)  第二部分  script 就是此组件的逻辑这里就是将此组件的名字定义为App

  (3) 第三部分 style 组件的样式

路由

路由：就是根据网址的不同返回不同的内容

我们来看看vue.js

如下，组件的使用需要路由，就像我们java里的导入， 

然后我们做如下尝试

 在index.js里添加一个路由

然后再添加一个文件

 显示如下