分享一個在前後端分離的管理後臺專案中,如何方便的由後端來配置 Vue Router 的方案

largezhou發表於2019-07-04

能做到的

  • (重要)幾乎完全由後端控制的 Vue Router 配置,為什麼是幾乎,後面會說。
  • (基本操作)根據路由配置,自動生成選單和麵包屑導航,理論支援無限級巢狀。
  • (還可以)理論任意層次的頁面,都可以快取,由後端設定是否快取。(發現快取有個 bug,暫時改掉了)

使用

後端配置路由:

表:

這裡是這篇文章唯一跟 Laravel 相關的地方,,,所以勉強算是 Laravel 相關的內容吧。

分享一個在前後端分離的管理後臺專案中,處理 Vue 的路由配置的方案

後臺使用:

分享一個在前後端分離的管理後臺專案中,如何方便的由後端來配置 Vue Router 的方案

前端稍微配合下:

分享一個在前後端分離的管理後臺專案中,處理 Vue 的路由配置的方案

為什麼前面說,幾乎由後端控制,因為為了路由元件的懶載入和程式碼分塊。我嘗試過這裡用 require.context 來批量註冊,但是 import() 中,如果有變數的話,webpack 打包階段,是不會去解析的,所以無效。

當然,如果不需要懶載入和程式碼分塊,是可以直接按照某個約定好的 { path: Component } 對映,來批量註冊元件的,那路由配置,就是完全後端控制了。

所以,完全後端控制的路由配置,有什麼好處?

哪些選單需要顯示,肯定都是要經過許可權過濾的,如果路由配置在前端寫死,那修改選單的許可權,就只能修改前端,改個許可權還得重新打包,,,接受不了。。。可以看看 iview adminelement admin 中,都是前端寫死路由和許可權。

現在,只需要在後端路由配置中,修改路由關聯的角色或者許可權,重新整理下頁面,相應的路由就有了或者沒了,,對應的選單也是。

說了這麼多,東西呢?

http://admin-demo.largezhou.cn/admin/vue-r...

賬號:admin

密碼:000000

可以隨意體驗,搞壞了,登入不了,可點 重置,,,,

修改了路由配置,要重新整理頁面,用導航欄上的重新整理也不行,,

更好的方案

如果大家有更好的方案,,,,我特麼馬上就重寫!!!

相關文章