### 表单校验
* rules属性绑定
* data中定义规则
* 表单item上prop属性绑定
注意点： prop的值和规则的值以及表单的值需要保持一致
### 在vue中如何获取dom元素
- 定义属性
- 获取：this.$refs.qqq
### 如何携带token
* 登录成功的时候将获取的token做本地缓存
* 需要做请求拦截====其他所有请求需要携带请求头 Authorization
- api/index.js
- 做请求拦截 获取本地缓存
- 将本都缓存的值添加到请求头上面去
### 左侧菜单数据展示
- 封装函数 ===获取左侧菜单数据请求的函数 api/index.js
- home.vue
+ 导入封装请求函数
+ 调用这个函数获取数据，并且将数据 赋值给data中的menuList
+ 将数据循环出来 ====进行2层循环
步骤分析：
- 静态组件布局编写===从官网复制过来
- 动态渲染左侧菜单导航===将获取的请求数据使用循环
- 配置属性默认值展开一个 ====查看官网配置属性
- 配置路由实现显示对应的组件
### 做菜菜单导航图标的显示
+ 引入iconfont.css文件 main.js中引入
+ 一级图标
- 准备一个对象或者数组
iconObj: {
0: 'icon-user',
1: 'icon-tijikongjian',
2: 'icon-shangpin',
3: 'icon-danju',
4: 'icon-baobiao'
},
- 图标标签属性绑定 class 然后根据索引找到对象中的哪一个类名进行显示
+ 二级图标====直接在二级循环标题前面提加图标标签====写死
#### 左侧菜单步骤分析：
- 1-显示组件菜单=====从官网复制
- 2-只展开一个 通过控制 index
- 3-配置路由 ===点击谁右边就显示哪一个组件
+ 配置项上面添加一个router属性 :router="true"
+ 配置唯一值index的值为path值=====:index="item2.path
- 4-改变默认高亮颜色 active-text-color="#00ff00"
- 5-点击当前只展开其他收起 :unique-opened="true"
- 6-刷新保持最后一次的高亮
+ 设置默认展开项 :default-active="defaultActive"
+ 点击
+ 给当前每一项的二级菜单 绑定点击事件 并且获取当前的path值
+ 将这个值赋值给 defaultActive 并且做本地缓存【刷新的时候还可以获取上一次的path值】
+ 刷新后获取这个值 defaultActive=从本都缓存中拿 || 'users'
- 7-解决二级菜单的每一项的右边框 .el-menu {border:none;}
- 8-点击收起菜单功能
+ 布局一个按钮 点击按钮
+ 点击设置 collapse=true or false
+ 改变左侧侧边栏宽度样式的设置
+ 关闭收起和展开的动画 :collapse-transition="false"
### 路由拦截
路由拦截和请求拦截的区别
请求拦截=====只要请求就拦截
路由拦截====只要路由值发生改变就拦截
### 如何设置路由拦截
+ 在router文件中设置路由前置拦截 router.beforeEach((to,form,next)=>{})
+ 判断是不是lofgin路由值 是 就直接放行，
+ 判断是不是有token 有token就放行 没有就去login
+ 最后解决掉了问题会出现兼容性 解决方法如下
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
};