1.1 前言

上一篇博文，我們分享了vue-element-admin二次開發(fā)的改造優(yōu)化技巧，這篇博文匯總 vue-element-admin 二次開發(fā)可能遇到的坑。

1.1.1 切換標(biāo)簽時未保存頁面的操作內(nèi)容

有時候會發(fā)現(xiàn)一個神奇的現(xiàn)象，當(dāng)打開多個tab標(biāo)簽，然后當(dāng)修改某個標(biāo)簽頁面內(nèi)容，再次切換標(biāo)簽頁面的時候，會發(fā)現(xiàn)之前改動過的標(biāo)簽頁的內(nèi)容重新加載了。。。

根本原因：

路由配置時name與頁面設(shè)置的name 不匹配導(dǎo)致，因?yàn)榭蚣苤兄心J(rèn)是會緩存tag頁面的，也就是noCache參數(shù)默認(rèn)就是false

路由配置中的 name

export-excel.vue 頁面中的 name

修復(fù)方案：將兩個 name保持一致即可。

• 參考文獻(xiàn)：Vue+Element+admin 頁簽切換刷新頁面問題

1.1.2 markdown 樣式亂碼

• 修復(fù)方案參考文獻(xiàn)：vue-element-admin Markdown 輸出樣式排版問題修復(fù)方案

1.1.3 修改默認(rèn)尺寸

vue-element-admin是一套相當(dāng)不錯的后臺管理UI框架, 默認(rèn)字體尺寸是Medium。

但是實(shí)際情況，有時候我們可能期望修改默認(rèn)尺寸為Mini

應(yīng)該怎么辦呢？

• 修復(fù)方案參考：vue-element-admin 修改默認(rèn)的全局字體尺寸為mini

1.1.4 當(dāng)后端服務(wù)器宕機(jī)情況下頁面加載層一直轉(zhuǎn)圈無法停止，只能關(guān)閉頁面

我們的前端項(xiàng)目中，訪問一個 api 一般可能像這樣

    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    }

會造成this.listLoading = true 后，加載層打開，但是訪問接口時候，
除非關(guān)閉頁面或重新登錄，否則頁面加載層會一直轉(zhuǎn)圈圈。

那么如何解決呢？

我們先來看下觀察下 src/utils/request.js 中的關(guān)鍵內(nèi)容處理如下：

...
/**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
  ...

當(dāng) catch到錯誤后，彈出了一個錯誤，并且執(zhí)行了Promise.reject(error)。

我以為這里已經(jīng)處理過了，到具體的頁面是無法感知到這個錯誤的，因此加載層也一直沒找到修復(fù)方法，后來才發(fā)現(xiàn)修復(fù)方法也很簡單，只需要優(yōu)化 js 調(diào)用改成類似如下即可：

    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      }).catch(() => {
         this.loading = false
      })
    }

• .then... .catch ...
  這是es 的回調(diào)基礎(chǔ)語法，作為后端的我們，不是專業(yè)的前端，可能會不知道。。。

1.1.5 隱藏齒輪

如果想隱藏右側(cè)的齒輪應(yīng)該，怎么操作呢？

參考博文: 5. vue-element-admin 二次開發(fā)攻略指南

以后再遇到新的，再不定期更新到此文中，有需要的朋友可以點(diǎn)贊關(guān)注收藏一波。
未完待續(xù)，不定期更新。。。文章來源地址http://www.zghlxwxcb.cn/news/detail-687837.html

到了這里，關(guān)于6. vue-element-admin 二次開發(fā)避坑指南的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！