Vue 動態路由的實現(後臺傳遞路由,前端拿到並生成側邊欄)
動態路由是一個常用的功能,根據後臺返回的路由json表,前端動態顯示可跳轉的路由項,下面來講解一下具體的實現方式:
大致業務需求:前端在login登陸頁,輸入賬號密碼後,點選登陸,介面返回登陸成功的同時,也會把該使用者可操作的路由連結串列返回給前端(JSON陣列格式),前端拿到這個JSON陣列,來渲染成側邊欄列表(說的是PC端),我們需要將所有的頁面都寫好,然後去匹配後臺返回的部分路由來進行展示(比如專案一共有100個頁面,後臺返回了10個路由地址,那麼我們只展示返回的對應的10個即可)
說一下思路:
我們可以將路由分為3個部分
1.預設展示的部分(包括login頁面、404頁面等等)
2.後臺返回的部分(具有許可權操作的部分路由)
3.全部動態路由(比如後臺返回了10個路由地址,我們全部動態的路由是100個地址,所做的就是將100個全部動態路由裡面和後臺返回的對應匹配的10個路由追加到預設路由裡面,就可以完成動態路由的流程了)
正常路由,我們的寫法大概是這樣的:
//src/router/index.js import Router from 'vue-router' Vue.use(Router) const Routes = [ { path:'/', component:Login, meta: { title: '登入頁' } }, { path:'/Home', component:Home, meta: { title: 'Home主頁' } } ] const Routers = new Router({ routes: Routes }) export default Routers;
我們要做動態路由,就需要改變一下這個結構(分為動態+靜態),這裡的靜態是指需要匹配展示對應的,所以,我們需要在建一個全部的路由JSON
//stc/router/index.js const defaultRoutes = [ //...這預設路由就是上面程式碼內的登入頁/404頁面...] const allRouters = [//這裡就是全部動態路由 { path:'/UserList', component:UserList, meta: { title: '人員管理' } }, { path:'/PwdList', component:PwdList, meta: { title: '密碼管理' } } ] const Routers = new Router({ routes: defaultRoutes//預設渲染 -> 預設路由 }) export default Routers;
所有的靜態路由和動態路由,都寫完了,接下來就是關鍵部分(將後臺返回的路由json拼接到route內),由於我們是在login頁面點選登陸後,進行的跳轉,所以,把程式碼寫到路由鉤子內(Routers.beforeach函式)
Routers.beforeEach((to,from,next) => { if(to.path != '/' && !store.state.isLogin) { //跳轉的不是首頁 同時 使用者還未登陸 //這個判斷,我們就可以基本判定使用者是在做登陸時候的跳轉 //↓拿到登陸時,介面返回的路由陣列(vuex內),大致是這樣的 let resRouterArr = [ { routeName: '人員管理', children: [ { routeName: '銷售管理', ... }, { routeName: '內勤管理', ... } ] } ] let routerArr = [] resRouterArr.forEach(item => { allRouters.forEach(all => { if(item.routeName == all.routeName) { //拿到本地路由物件 let obj = JSON.parse(JSON.stringify(all)) let childrenRouter = [] if(item.children && item.children.length > 0) { item.children.forEach(childItem => { all.children.forEach(allItem => { if(childItem.routeName == allItem.routerName) { childrenRouter.push(allItem) } }) }) obj.children = childrenRouter } routerArr.push(obj) } }) }) Routers.addroutes(routerArr)//addroutes為新增路由陣列的方法 store.commit('domRouteTree',rousterArr)//儲存進vuex,之後頁面左右路由列表渲染使用 next({...to,replace:true})//進行路由跳轉 } else { next() } })
這樣,我們跳轉到之後的業務頁面,就可以看到列表左側生成的動態路由列表了,點選左側的幾個動態生成的路由,也很nice,麼得問題~
ps:這裡遇到了一個坑,踩了一會兒,也記上
以前都是這樣寫的
import UserList from '@/views/User/UserList'
但是跳轉過去之後,頁面就會出現白屏報錯的情況,查了半天,原來要補齊路徑
import UserList from '@/views/User/UserList.vue'
解決完,還特意試了一下,加上【.vue】就沒問題,去掉【.vue】就白屏+報錯,真是坑了~,後來瞭解到 要加.vue是因為user目錄下對應的不是index,嗯,這樣解釋,理解的更透徹了!