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 你的專...