記一次Vue動態渲染路由的實現

背景: 公司打算做乙個(cms),最開始前端參照vue-element-admin的思路,驗證了前端鑑權的可能性,大佬寫的**思路清奇,值得學習,後來考慮諸多因素,介面安全性 前端鑑權的難度 以及專案的複雜度,最後選擇採用後端渲染動態路由的形式

使用的是vue+element的後台管理模板github

vue 動態路由的實現(後台傳遞路由，前端拿到並生成側邊欄)

issues/293

基礎的一些思路和vue 動態路由的實現vue 動態路由的實現(後台傳遞路由，前端拿到並生成側邊欄)一樣,核心部分加入了自己的理解

每次路由跳轉 先判斷 是否登入 登入了才會去進行路由相關邏輯

獲取變數getrouter,存在則直接放行 因為路由配置存在

假如重新整理頁面getrouter變數就不存在了,所以 就要在去獲取一次

獲取到了在儲存到getrouter上,便於以後使用,減少請求

以下為具體實現思路

基礎路由為不登入也可以訪問的路由

const staricroutermap = [

,  ,
children: []},
,  , // .... 
]export
default
new router(),
routes: staricroutermap
})複製**

後端會根據當前使用者許可權動態返回路由結構 前端不再需要考慮許可權問題

[, ]

}, ]
}]複製**

../router/_import

export

default file => 
const map = 
複製**

../utils/addrouter

import _import from

'../router/_import'
// 獲取元件的方法
function
addrouter(routerlist) 
if (e.icon !== '' && e.title !== '') 
}if (e.title !== '' && e.icon === '') 
}delete e.icon
delete e.title
if (e.children != null) 
})return routerlist
}export 
複製**

我們處理後的路由後面需要與現有的router進行拼接,這裡需要根據需求 修改處理路由的規則

[

}, }],
"path": "menu1",
"meta": 
}, }],
"path": "/nested",
"meta": 
}]複製**

這裡也是最複雜的一塊,參考了一些別人的思路,後來完成了這個版本,這就是最上面實現思路的**

import router from

'./router'
import store from
'./store'
import nprogress from
'nprogress'
// progress 進度條
import
'nprogress/nprogress.css'
// progress 進度條樣式
import  from
'element-ui'
import  from
'./utils/addrouter'
var getrouter
router.beforeeach((to, from, next) => )
}if (!getrouter)  else 
} else 
} else  else 
}})router.aftereach(() => )
function
gotorouter(to, next) )
} catch (error) 
}function
setrouterlist(to, next) )
}function
getrouterlist(name) 
複製**

最後修改渲染側邊欄部分部分的**

src\views\layout\components\sidebar\index.vue

computed: ,

// ....
}複製**

這樣就實現了動態渲染後端傳遞的路由,,感覺還是用可以優化的地方,歡迎指正

使用Vue渲染可配置表單 記一次問卷平台專案

近幾天來了個緊急專案，想要做乙個內部版本的問卷星。相當於可以編輯問卷並提供問卷展示，資料統計的這麼乙個平台。整個專案耗時不長，本著積澱和積累的原則，將過程中的思路和收穫進行一下沉澱。由於公司原因，尚未開源。不過沉澱了個動態配置表單的嘗試 github，用於後台快速開發表單等需求，搭配element ...

動態sql的實現（記一次面試問題）

1.前端時間聽朋友講了這樣乙個面試問題 如果乙個客戶在北京購買了該公司的產品，登入使用者賬戶時可以直接根據產品購買地來查出該訂單資訊 如果還在上海 廣州購買了該公司的產品，可以用地區in 北京，上海，廣州 來查出該使用者的所有訂單資訊 如果使用者在全國36個省市區都購買了產品，要如何查出來所有的訂單...

記一次關於vue效能問題

當時開發專案的時候，涉及到乙個操作列表 不是單純展示的列表，裡面包含很多操作功能 的功能。把列表的每個小item寫成乙個子元件，當時寫子元件沒有考慮到資料量的問題。所以在寫子元件，並沒有做什麼優化，而且裡面還加了form表單校驗，裡面還有很多事件處理，樣式處理等等複雜的邏輯。注意 首先需要從設計上面...