一、基于嵌套路由实现页面的局部更新
一级路由：
| http://localhost:8080/login http://localhost:8080/register http://localhost:8080/order http://localhost:8080/.... |
二级路由及多级路由：
| http://localhost:8080/user/login http://localhost:8080/order/add http://localhost:8080/a/b/c/d/e.... |
嵌套路由的核心功能：使用请求资源路径来动态修改页面的局部内容。例如：
| http://localhost:8080/component 组件页面 想要动态修改组件页面的main部分的内容，可以如下设计嵌套路由： http://localhost:8080/component/container 组件页面内嵌套Container.vue http://localhost:8080/component/table 组件页面内嵌套Table.vue http://localhost:8080/component/form 组件页面内嵌套Form.vue …… |
基于嵌套路由实现局部页面更新的步骤：
1. 准备好3个组件： Container.vue Table.vue Form.vue 。
2. 配置嵌套路由。在 component 路由中配置 children 。
3. 在 Component 组件的 el-main 中编写占位符： router-view 。
测试是否配置成功：
| http://localhost:8080/component/container 组件页面内嵌套Container.vue http://localhost:8080/component/table 组件页面内嵌套Table.vue http://localhost:8080/component/form 组件页面内嵌套Form.vue http://localhost:8080/component/button 组件页面内嵌套Button.vu |
实现跳转具体步骤：
在菜单栏开启路由，因为这个属性是布尔型，写了就是true，不写就是false，所以后面不用加值
但是因为加了router属性，点击菜单栏跳转的是选项中index的值，所以不能继续使用序号，需要更改index的值为跳转的路径
默认选中项，不能写死，要写成一个JS动态的代码段，当前组件的路由对象里面的path属性，path是8080往后的路由 路径
如果还需要写子菜单，写三级路由
二、Table 表格组件
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
案例：呈现基础表格。
1. 在 Table.vue 中粘贴来文档中（ Table 基础表格）的内容。
有上述代码可知：
1. element中一个表格包含： el-table (表格) el-table-column (表格列)
2. 在 el-table 中通过 data 属性可以给表格组件传参，提供表格数据集。
3. 在 el-table-column 中通过 label 属性控制列头文本， prop 属性控制该列显示的对象的属性值（值如果是布尔值是不显示的，可以根据要求动态设置），如果不设置width，宽度就是自适应。
因为直接使用prop传参有一定的局限性，不能够给更丰富的样式和自定义列类容，所以在查阅文档之后，发现el-table-colum可以放更多的内容，其中有一项是template标签，可以给图一个slot-scope属性，是指定插槽作用域变量scope，通过scope来访问当前行的对象name属性的值，此方法与prop效果一样，其优点在于，可以在获取的实参前面添加其他自定义的内容，
三目也同样适用
再尝试做一列操作按钮
直接去文档里粘贴需要的按钮的代码过来，给按钮绑定方法，当前选中行的下标作为事件处理传过去，如何取得下标，有一个专门的$index属性可以去到，前提是要先声明scope
这里的这个方法，splice是js初级的内容，删除原始数组中的元素，spilce的第一个参数是从哪里开始，第二个参数是删几个
表格中的自定义列模板
三、Form表单组件
先研究文档里的属性，ref是给这一个表单一个名字，后面需要的时候可以通过this.$refs[‘from’] 找到，:model就是双向数据绑定，后面的值是存储数据的位置
Form 表单组件用于收集用户数据，基本结构如下
由上述代码可知：
el-form 组件设置 :model 来指定收集到的数据封装到 data 的哪一个属性。
el-form-item 组件内部的表单组件： el-input ，需要通过 v-model 完成双向数据绑定。
表单验证
先观察文档，发现多了一个rules，它是定义验证的规则
一个输入框可以写多个验证规则
焦点失去后的表单验证
需要为 el-form 添加 rules 属性来为每一个字段指定验证规则。
需要为 el-form-item 添加 prop 属性来设置当前表单项是用于验证哪个字段。
点击提交按钮后的表单验证
有一个方法专门做判断
Valid是回调方法的参数用于接收函数的结果，相当于一个形参，可以修改
点击提交按钮后的表单验证模板：
需要为 el-form 设置 ref 属性起个名字，调用该 form 对象的方法： validate 方法验证表单。