6-3 单文件组件与Vue中的路由

打开项目

进入src

main.js

index.html

当一个文件以vue结尾的时候，我们把这种文件叫做单文件组件

根据网址的不同，返回不同的内容给用户

<view-router>显示当前路由地址所对应的内容

在入口文件里引入了一个router变量，然后在创建根实例的时候，使用了这个router变量

router index.js最终导出去的就是一组路由的配置项

@指的src目录

当用户访问根路径的时候，给用户展示的是helloworld这个组件

路由的配置都放在router index.js里面

 

当访问根路径的时候，希望页面展示的是首页

去掉import HelloWorld from ‘@/components/HelloWorld’

删掉components

在src下建文件夹pages，里面放所有网页的集合，在pages里建一个文件夹home，也就是首页文件夹，在home里建一个文件，这个文件叫Home.vue

 

当用户访问根路径的时候，希望展示的不是HelloWorld这个组件而是首页这个组件，需要引入进来

export default 前面不要有缩进

 

当访问列表页的时候，希望展示一个list页面

到路由配置里面，增加一条配置项

pages目录下创建文件夹list，list文件夹下再创建一个文件List.vue