vue2後台動態路由

2022-09-23 15:42:12 字數 1390 閱讀 6151

vue管理平台的動態路由(後台傳遞路由,前端拿到並生成側邊欄)

前端的路由從後台獲取,包括許可權;

大體步驟包括:路由攔截(鉤子函式)---->後台獲取路由資料 ----> 儲存到本地或vuex中.

在router-->index.js中:

1 router.beforeeach((to, from, next) => 

2 // 載入動態選單和路由

3 if (to.path === '/') else

11 next()

12 }

13 })

乙個tip,鉤子函式一定要記得else{},就這個小問題找了半天,各種排除。。。

我這裡沒有登入驗證,所以通過path來判斷是否載入動態路由;

下面的判斷是由於vuex在f5重新整理時會清空,所以通過裡面是否有vuex裡的某個狀態來判斷是否要再次載入路由;一般用登入的token判斷;

下面是載入動態路由的關鍵函式:

1 /**

2 * 載入動態選單和路由

3 */

4 function adddynamicmenuandroutes(to, from) ).then(res => ).then(res => )

29 })

30 .catch(function(res) {})

31 }

新增動態路由:

1 /**

2 * 新增動態(選單)路由

3 * @param menulist 選單列表

4 * @param routes 遞迴建立的動態(選單)路由

5 */

6 function adddynamicroutes(menulist = , routes = ) else if (menulist[i].url && /\s/.test(menulist[i].url))

26 url = url.substring(0, url.length - 1)

27 var route = `], resolve),

30 name: menulist[i].name,

31 meta:

35 }

36 } catch (e) {}

37 // }

38 routes.push(route)

39 }

40 }

41 if (temp.length >= 1) else

47 return routes

48 }

模擬後台的路由資料:

1 "data": [, , , ,

86 ,

104 ,

140 ]

141 }

142 ]

Vue2路由鑑權

路由導航鉤子做鑑權 router index.js var router export default router new router 更多.let indexscrolltop 0 router.beforeeach to,from,next else else else if to.path...

VUE 2 渲染元件 重定向路由

router view 渲染路徑匹配到的檢視元件2.刪除components下的所有元件 3.刪除views資料夾 import vue from vue import vuerouter from vue router vue.use vuerouter 路由規則 const routes con...

vue2新人入門

預設對webpack,sass,npm有一定的了解。一些vue指令不會說,反正官方文件有,我也懶得抄。一 超級基礎部分 1.全域性安裝 npm install globall vue cli 已全域性安裝了的不必安裝 2.建立乙個基於webpack的模板專案 vue init webpack 你的專...