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

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

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

解決方案

方法一：

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

方法二：

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

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

  {
    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: "測(cè)試界面1",
              icon: "",
              cache: true,
              closable: true,
              routerPath: "/test/test_page1"
            }
          }
        ]
      }
    ]
  },

2、三級(jí)就照著三級(jí)的路由寫

{
    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: "測(cè)試界面2",
              cache: true,
              closable: true,
              routerPath: "/test/test_page2/test_page3"
            }
          }
        ]
      }
    ]
  },

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

測(cè)試結(jié)果

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