我們一般的應用系統，選單是很多功能界面的入口，選單為了更好體現功能點的設定，一般都是動態從資料庫生成的，而且還需要根據用戶角色的不同，過濾掉部分沒有權限的選單；在Vue&Element的純前端框架中，還引入了路由的概念，路由是對應具體的頁面視圖和布局的相關資訊集合，是用戶可訪問的頁面連接集合，本篇隨筆介紹Vue+Element 前端應用開發之選單和路由的關系，
1、選單和路由的關系
前面介紹到，選單是展現在界面上的功能入口，路由是我們前端可以訪問的連接，兩者結合才能正常訪問某個頁面，有些系統把路由定義作為選單的來源，那樣也可以呈現選單，不過這樣他們的關系就耦合起來，而且不好實作動態的處理，
我們的選單作為一個資料庫記錄，可以通過系統進行維護，從而動態生成的，它的鍵值對應路由即可，
我們做法是以本地配置好的路由串列為基準，而選單我們采用在后端配置方式，前端通過介面動態獲取選單串列，通過選單的名稱和路由名稱的對應關系，我們以選單集合為對照，然后過濾本地所有靜態路由的串列，然后獲得用戶可以訪問的路由串列，設定動態路由給前端，從而實作了界面根據用戶角色/權限的不同，而變化用戶的選單界面和可訪問路由集合，
選單的編輯界面如下所示，可以在圖示串列中選擇合適的圖示
選單路由處理的大概的操作程序如下所示
通過資料庫配置的選單資料，最侄訓傳到前端的時候，是一個JSON集合， 對于ABP框架的后端，我們可以查看到選單部分的API介面
選單的JSON是根據角色進行動態獲取的，不同的角色對應不同的選單集合，并且選單是一個多層次的樹串列，可以定義無窮多級的展示，JSON格式化視圖如下所示，
選單包含路由的鍵，我們在前端JS變數中存盤所有的路由資訊，我們根據選單的鍵來過濾系統路由，作為前端可用的路由資訊，路由JS定義如下所示，
為了有效管理系統路由的集合定義，我們把它們按分類分為細粒度的模塊檔案進行管理，如下所示，
大概分類用文字表示如下所示，
其中的index.js就是集合所有模塊的路由檔案，如下所示，
用戶在經過登錄界面處理后，首先獲得對應用戶角色的可用選單，
根據角色的選單串列，就會通過對應的Action獲取動態路由資訊（注意，這里是先獲取動態選單，然后過濾本地路由，即為動態路由資訊），獲得動態路由后，就設定前端所能訪問的路由集合即可，如下代碼所示，
有了這些新的路由允許，前端系統的選單才能夠正常運轉起來，否則即使界面展示了選單，也不能訪問特定的視圖頁面而跳到了404頁面，因為路由沒有，
在前端界面處理中，我們通過Element界面組件的方式展示動態選單資訊，并結合選單和路由的關系，實作選單跳轉到對應視圖的處理程序，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285944.html
標籤：JavaScript
上一篇：vue對組件進行二次封裝