Element做管理系統(tǒng)時 2、3級路由切換時，界面數(shù)據(jù)不緩存問題

wuyangchun 發(fā)布于2019-08-23 14:17 / 3430人閱讀

摘要：解決方案方法一適用范圍，菜單列表是通過接口返回的。菜單列表不是接口返回的，接口只返回訪問菜單的權限，大體意思就是統(tǒng)一把路由寫成三級形式。我比較贊成菜單權限列表一律放在后臺做這樣做風險遠比在前端處理的要小。

解決方案

方法一：

適用范圍，菜單列表是通過接口返回的。
PS：只要通過接口返回的菜單列表就意味著用戶是可以訪問的，權限處理一律放在后臺做，但寫本地路由時不論是二級界面還是三級界面，配置路由時統(tǒng)一配置成二級路徑，這樣就可以保證它們可以在同一級別，自然而然的就不會出現(xiàn)題目所說的問題

方法二：

適用范圍，菜單列表訪問權限是在前端做的。 PS: 菜單列表不是接口返回的，接口只返回訪問菜單的權限，大體意思就是統(tǒng)一把路由寫成三級形式。

1、二級寫成三級, 有人說我是二級你寫成三級這樣路徑不就不對了嘛，這里在二級路由這地方利用path: "/test"
這樣寫url依然是二級路徑

  {
    path: "/test",
    component: layOut,
    children: [
      {
        path: "/test",
        component: blank,  
        children: [
          {
            path: "test_page1",
            name: "test_page1",
            component: resolve =>
              require(["@/views/test/test_page1/list.vue"], resolve),
            meta: {
              label: "測試界面1",
              icon: "",
              cache: true,
              closable: true,
              routerPath: "/test/test_page1"
            }
          }
        ]
      }
    ]
  },

2、三級就照著三級的路由寫

{
    path: "/test",
    component: layOut,
    children: [
      {
        path: "test_page2",
        name: "test_page2",
        component: blank,
        children: [
          {
            path: "test_page3",
            name: "test_page3",
            component: resolve =>
              require(["@/views/test_page2/test_page3/list.vue"], resolve),
            meta: {
              label: "測試界面2",
              cache: true,
              closable: true,
              routerPath: "/test/test_page2/test_page3"
            }
          }
        ]
      }
    ]
  },

3、component: blank, 這地方需要做一下緩存

測試結果

經(jīng)測試上面兩種寫方法都可以解決二、三級路由切換時，界面數(shù)據(jù)不會緩存問題，不過具體場景要選擇對應方法，但是為什么會出現(xiàn)這樣問題，自己還沒有深入了解，有時間一定要去探究其原理。
PS:我比較贊成菜單權限列表一律放在后臺做, 這樣做風險遠比在前端處理的要小。

GPU云服務器云服務器解析jpeg數(shù)據(jù)時的問題做數(shù)據(jù)分析時標準化 ecs故障時自動切換支付時常見問題

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/100392.html

最近遇到的前端面試題(2017.03.08更新版)

摘要：通過管理組件通信通過驅動視圖比較差異進行更新操作作者第七頁鏈接來源知乎著作權歸作者所有，轉載請聯(lián)系作者獲得授權。達到無刷新的效果。對象的狀態(tài)不受外界影響。對象代表一個異步操作，有三種狀態(tài)進行中已完成，又稱和已失敗。以下問題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗整理后覺得更容易理解的解釋版本，歡迎補充。一. 輸入url后的加載過程從輸入 URL 到頁面加載完成的過程中都發(fā)生了什么計算機...

linkFly 2019-08-21 11:35 評論0 收藏0
最近遇到的前端面試題(2017.03.08更新版)

摘要：通過管理組件通信通過驅動視圖比較差異進行更新操作作者第七頁鏈接來源知乎著作權歸作者所有，轉載請聯(lián)系作者獲得授權。達到無刷新的效果。對象的狀態(tài)不受外界影響。對象代表一個異步操作，有三種狀態(tài)進行中已完成，又稱和已失敗。以下問題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗整理后覺得更容易理解的解釋版本，歡迎補充。一. 輸入url后的加載過程從輸入 URL 到頁面加載完成的過程中都發(fā)生了什么計算機...

Nosee 2019-08-30 15:53 評論0 收藏0
最近遇到的前端面試題(2017.03.08更新版)

摘要：通過管理組件通信通過驅動視圖比較差異進行更新操作作者第七頁鏈接來源知乎著作權歸作者所有，轉載請聯(lián)系作者獲得授權。達到無刷新的效果。對象的狀態(tài)不受外界影響。對象代表一個異步操作，有三種狀態(tài)進行中已完成，又稱和已失敗。以下問題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗整理后覺得更容易理解的解釋版本，歡迎補充。一. 輸入url后的加載過程從輸入 URL 到頁面加載完成的過程中都發(fā)生了什么計算機...

劉東 2019-08-01 16:29 評論0 收藏0
餓了么組件庫，element-ui開發(fā)精美的后臺管理系統(tǒng)系列之（一）開發(fā)伸縮菜單

摘要：先看這個值即為判斷顯示展開還是收縮狀態(tài)的開關。這樣就實現(xiàn)了展開狀態(tài)下的菜單。如果有時間的話，我會把這個系列寫完，知道朋友們能獨立開發(fā)一個完整的的單頁面后臺管理程序。涉及到路由，權限等等相關內(nèi)容的部分，跟本文主旨關系不大，所以我將會在另外一篇文章中詳述，混在一起的話內(nèi)容太多了基于element-ui的左側可伸縮的菜單通過vuejs來開發(fā)支持展開收縮的菜單是非常簡單的，只需要v-i...

whlong 2019-08-21 16:23 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節(jié)點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個...

Tecode 2019-08-23 16:02 評論0 收藏0