VUE中的单文件组件及路由

vue

vue code 2017

main.js是程序的入口文件，定义组件，并定义挂载点，APP的组件进行显示，然后根据import查询APP的文件，由图可以看出，存在APP.vue的文件。在文件中引入了router文件，并定义了router组件

打开APP.vue，由三部分组成，在div中定义了router-view。Template：组件的模板Script：组件的逻辑Style：组件的css样式当一个文件以.vue结尾时，这种文件叫作单文件组件。显示的内容即为APP.vue的内容。

router-view标签作用显示的是当前路由地址所对应的内容。下面讲解其对应关系，系统会根据定义的router-view去查找router路径下对应的文件。在router的index文件中，会自动引入index.js文件。定义好了访问的路径。

下面对文件具体内容进行介绍，当主程序入口到index文件时，会根据访问的路径选择打开不同的界面。配置添加显示在主页的方式如下。

然后定义Home.vue单文件，并编写需要显示的内容

保存然后运行程序：npm run dev，启动项目。

既可以查看浏览器显示的具体内容：

如果想访问列表页路径的时候，显示出一个list列表，可以继续通过编写代码配置实现。首先到路由配置里面增加路由的配置。

然后在相应的文件下进行创建文件。

当访问路径为：http://localhost:8080/#/list，可以查看到list下的内容