在后台管理系統中，一般都會采用權限管理。路由菜單數據都會保存到數據庫中，我們希望vue-router通過接口請求動態生成路由，在vue-router 2.2版本新增了一個router.addRoutes(routes)方法，即可用它來實現動態路由了。 下面就直接上代碼。
routers.js代碼如下：
const _import = file => require('../pages/' + file + '.vue').default //全局路由(無需嵌套) const globalRoutes = [ { path: '/404', component: _import('404'), name: '404',meta: { title: '404' } }, { path: '/login', component: _import('login'), name: 'login',meta: { title: '登錄頁' }}, ] //主入口路由(需嵌套整體布局頁面) const mainRoutes = { path: '/',component: _import('index'),name: 'index', children: [] } //實例化 const router = new VueRouter({ mode: 'hash', scrollBehavior: () => ({ y: 0 }), isAdd: false, //是否已經添加動態(菜單)路由 routes: globalRoutes.concat(mainRoutes) }) router.beforeEach((to, from, next) => { //添加動態(菜單)路由 if (router.options.isAdd || isGlobalRoutes(to)){//判斷是否已經添加動態路由,或者當前為全局路由的時候。 直接訪問 next() }else{ const menus=[//測試-數據 typ[0上級菜單，1頁面菜單，2頁面功能]，這里是http請求后端接口獲取數據路由數據。 {id: 1, parentId: 0, name: "系統管理", url: "sys",type:0}, {id: 2, parentId: 1, name: "賬號管理", url: "sys/account",type:1}, {id: 3, parentId: 1, name: "菜單管理", url: "sys/menu",type:1}, {id: 4, parentId: 1, name: "角色管理", url: "sys/role",type:1}, {id: 5, parentId: 0, name: "數據管理", url: "data",type:0}, {id: 6, parentId: 5, name: "用戶管理", url: "data/user",type:1}, {id: 7, parentId: 0, name: "審核管理", url: "examine",type:0}, {id: 8, parentId: 7, name: "短視頻審核", url: "examine/video",type:1}, {id: 9, parentId: 7, name: "相冊審核", url: "examine/photos",type:1}, ] sessionStorage.setItem('menus', JSON.stringify(menus || '[]'))//存儲動態路由,或者使用vuex。以便后面需要。 addDynamicMenu(menus) next({...to, replace: true}) } }) //判斷當前是否全局路由 function isGlobalRoutes(to){ for(let i in globalRoutes){ if(globalRoutes[i].path == to.path){ return true; } } return false; } //添加動態(菜單)路， 參數menu：菜單列表 function addDynamicMenu (menu=[]) { var routes=[] for(let i in menu){ if(menu[i].type==1){ var route={path: menu[i].url,component:_import(menu[i].url),name: menu[i].name,}//菜單管理 routes.push(route) } } mainRoutes.children = routes router.addRoutes([//vue-routers2.2版本以上才支持。 mainRoutes, {path:'*', redirect:{name:'404'},} ]) router.options.isAdd=true } export default router
在main.js中使用：
//.... import router from './lib/routers'//路由配置 //new new Vue({ render: h => h(App), router,//路由 }).$mount('#app')