一个配置路由的文件由导入路由模块、创建路由对象和导出路由对象三个部分组成，在创建路由对象时，需要构建路由数组，路由数组中包括一级、二级和多级路由结构，因此，这种结构的路由配置，又称为路由树配置。

一级路由结构

所谓的一级路由是指在路由地址中，只有一个路径，则称为一级路由，如下地址所示：

http://abc.com/list

这种一级路由结构在路由数组中配置如下代码所示：

// 导入组件
import List from '../views/list.vue'
// 配置组件对应路径
const routes = [{path: '/list',name: 'list',component: List}
]

在上述代码中，routes 是一个路由数组对象，对象中包括各种组件对应路径的关系，其中path属性表示组件对应的路由地址，是必填项，name属性表示路由的名称，是非必填项，如果添加后，可以通过name值来代替path值进行路由的跳转。

component属性则表示地址对应的组件，它接收一个变量，变量的值就是一种已经导入文件的模板组件，如上述代码中的 List 组件，由于它是先导入后引用的方式，称为同步组件，如果这种方式的组件过多，会影响到浏览器加载首屏的速度。

为了解决这个问题，推荐使用异步组件加载，即component属性接收一个函数，当函数执行时通过 return 语句返回指定的组件，这种方式返回的组件在代码打包时会自动生成独立的文件，当访问对应路由地址时，进行按需加载，从而优化浏览器加载组件的速度。

因此，为了实现异步加载组件，上述代码则修改成如下内容：

// 配置组件对应路径
const routes = [{path: '/list',name: 'list',component: () => import("../views/list.vue")}
]