一、基于嵌套路由实现页面的局部更新

一级路由：

二级路由及多级路由：

嵌套路由的核心功能：使用请求资源路径来动态修改页面的局部内容。例如：

基于嵌套路由实现局部页面更新的步骤：

1. 准备好3个组件： Container.vue Table.vue Form.vue 。

2. 配置嵌套路由。在 component 路由中配置 children 。

3. 在 Component 组件的 el-main 中编写占位符： router-view 。

测试是否配置成功：

实现跳转具体步骤：

在菜单栏开启路由，因为这个属性是布尔型，写了就是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 方法验证表单。