### 表單校驗
* rules屬性綁定
* data中定義規(guī)則
* 表單item上prop屬性綁定
注意點：? prop的值和規(guī)則的值以及表單的值需要保持一致
### 在vue中如何獲取dom元素
? ? - 定義屬性
? ? <div ref='qqq' @click="btn">111111</div>
? ? - 獲取：this.$refs.qqq
### 如何攜帶token
* 登錄成功的時候?qū)@取的token做本地緩存
* 需要做請求攔截====其他所有請求需要攜帶請求頭? Authorization
? ? - api/index.js
? ? ? ? - 做請求攔截? ? 獲取本地緩存
? ? ? ? - 將本都緩存的值添加到請求頭上面去
###? 左側(cè)菜單數(shù)據(jù)展示
? ? - 封裝函數(shù)? ===獲取左側(cè)菜單數(shù)據(jù)請求的函數(shù)? ? api/index.js
? ? - home.vue
? ? ? ? + 導(dǎo)入封裝請求函數(shù)
? ? ? ? + 調(diào)用這個函數(shù)獲取數(shù)據(jù)式塌，并且將數(shù)據(jù) 賦值給data中的menuList
? ? ? ? + 將數(shù)據(jù)循環(huán)出來 ====進行2層循環(huán)
? ? 步驟分析：
? ? - 靜態(tài)組件布局編寫===從官網(wǎng)復(fù)制過來
? ? - 動態(tài)渲染左側(cè)菜單導(dǎo)航===將獲取的請求數(shù)據(jù)使用循環(huán)
? ? - 配置屬性默認值展開一個? ====查看官網(wǎng)配置屬性
? ? - 配置路由實現(xiàn)顯示對應(yīng)的組件
###? 做菜菜單導(dǎo)航圖標的顯示
+ 引入iconfont.css文件? ? ? main.js中引入
+ 一級圖標
? ? - 準備一個對象或者數(shù)組
? ? ? ? ? iconObj: {
? ? ? ? ? ? 0: 'icon-user',
? ? ? ? ? ? 1: 'icon-tijikongjian',
? ? ? ? ? ? 2: 'icon-shangpin',
? ? ? ? ? ? 3: 'icon-danju',
? ? ? ? ? ? 4: 'icon-baobiao'
? ? ? ? },
? ? - 圖標標簽屬性綁定? class? 然后根據(jù)索引找到對象中的哪一個類名進行顯示
+ 二級圖標====直接在二級循環(huán)標題前面提加圖標標簽====寫死
#### 左側(cè)菜單步驟分析：
? ? - 1-顯示組件菜單=====從官網(wǎng)復(fù)制
? ? - 2-只展開一個? 通過控制? index
? ? - 3-配置路由 ===點擊誰右邊就顯示哪一個組件?
? ? ? ? + 配置項上面添加一個router屬性? :router="true"
? ? ? ? + 配置唯一值index的值為path值=====:index="item2.path
? ? - 4-改變默認高亮顏色? active-text-color="#00ff00"
? ? - 5-點擊當前只展開其他收起? :unique-opened="true"
? ? - 6-刷新保持最后一次的高亮?
? ? ? ? + 設(shè)置默認展開項? :default-active="defaultActive"
? ? ? ? + 點擊
? ? ? ? ? ? + 給當前每一項的二級菜單? 綁定點擊事件 并且獲取當前的path值
? ? ? ? ? ? + 將這個值賦值給 defaultActive 并且做本地緩存【刷新的時候還可以獲取上一次的path值】
? ? ? ? ? ? + 刷新后獲取這個值? defaultActive=從本都緩存中拿 ||? 'users'
? ? - 7-解決二級菜單的每一項的右邊框? ? .el-menu {border:none;}
? ? - 8-點擊收起菜單功能
? ? ? ? + 布局一個按鈕? 點擊按鈕
? ? ? ? + 點擊設(shè)置 collapse=true? or? false?
? ? ? ? + 改變左側(cè)側(cè)邊欄寬度樣式的設(shè)置? ? <el-aside :width="collapse?'64px':'200px'">
? ? ? ? + 關(guān)閉收起和展開的動畫? :collapse-transition="false"
? ###? 路由攔截
? 路由攔截和請求攔截的區(qū)別
? 請求攔截=====只要請求就攔截
? 路由攔截====只要路由值發(fā)生改變就攔截
? ###? 如何設(shè)置路由攔截
? ? + 在router文件中設(shè)置路由前置攔截? router.beforeEach((to,form,next)=>{})
? ? + 判斷是不是lofgin路由值? 是 就直接放行腹缩，
? ? + 判斷是不是有token? 有token就放行 沒有就去login
? ? + 最后解決掉了問題會出現(xiàn)兼容性? 解決方法如下
? ? const originalPush = VueRouter.prototype.push;
? ? VueRouter.prototype.push = function push(location) {
? ? return originalPush.call(this, location).catch(err => err);
? ? };
