vue router 實現動態路由載入，許可權管理

//先導入這些亂七八糟的

import vue from 'vue'import router from 'vue-router'import store from '@/store/index'import nprogress from 'nprogress'import 'nprogress/nprogress.css'import gatewayhomerouter from './gatewayhome'vue.use(router)
//不需要許可權的路由
export const constantroutes =[
, },
, ,
, ,
, ,
//gatewayhomerouter
]export const asyncroutes =gatewayhomerouter
const createrouter = () => new
router()
const router: any =createrouter()
//寫乙個重置路由的方法，切換使用者後，或者退出時清除動態載入的路由
export 
function
resetrouter() 
//不需要許可權的白名單path
const whitelist = ['/entrance', '/register', '/login', '/logout', '/error', '/admittance', '/quit']
router.beforeeach(async (to, from, next) =>
} if(hastoken) )
nprogress.done()
} else
next()
} else
= await store.dispatch('commit_user_login')
let roles: any =[number(roletypedetail)]
//根據角色遍歷出來對應可以顯示的路由
const accessroutes = await store.dispatch('permission/generateroutes', roles)
//通過addroutes載入路由
router.addroutes(accessroutes)
//儲存已載入的狀態，下次就不會進入這個try
store.commit('set_is_mounted_routes', true
) nprogress.done()
next()
} catch
(error) }}
} else
else
}})router.aftereach(() =>)
export 
default router

下面是permission.ts檔案，這個檔案只做了一件事，就是根據路由meta物件的某個屬性值，來過濾出來對應值擁有的路由物件，以供addroutes，直接拿過去用

import  from '@/router'

//判斷是否有許可權
function haspermission(roles, route) else 
}//過濾出有許可權的路由
export function filterasyncroutes(routes, roles) 
if (haspermission(roles, tmp)) 
res.push(tmp)}})
return res
}const permission = ,
mutations: 
},actions: , roles) else 
commit('set_routes', accessedroutes)
resolve(accessedroutes)})}
},getters: {},
}//匯出供使用
export default permission

下面是那個倒霉的要被過濾來過濾去的路由陣列

const gatewayhomerouter = [,

,component: () => import('@/views/home/gateway/index.vue')},,
component: () => import('@/views/home/suppliermaintenance/index.vue')},,
component: () => import('@/views/home/personnelmanagement/index.vue')},,
component: () => import('@/views/home/userinfo/index.vue')
},]}]
export default gatewayhomerouter

專案選單欄也可以遍歷新路由陣列生成。。。

好了，抄完了

vue router動態路由

使用者不登陸也可以檢視的頁面 router index.js export const constantroutermap export const createrouter new router 重置上一次的matcher,使用者退出後不重新整理頁面，重置router裡的routes const ...

vue router 之動態路由

第一次寫部落格，先稍稍激動一下下 好的，激動結束，開啟挖坑之路。vue router官網上面是這樣說的 帶查詢引數，變成 register?plan private router.push 然後，我就這樣寫了 this.router push 結果很明顯，失敗了。然後我就默默的再次看了一下官網，結果...

vue router 的動態路由

一 在你的router.js中配置好路由，動態路由的配置和普通的vue路由略有不同 第一步 在控制路由的js中，設定這樣一段 來配置路由 export default new router 在path鍵值對中，最後的 id就是設定好的動態路由的變數名 第二步 在對應的router link標籤中這樣...