vue-admin动态路由的实现
前言:项目开发中菜单栏往往是后端基于角色控制的,所以菜单栏通过后端返回,然后在进行渲染,vue-admin这个管理系统模板用的人贼多,以此为例。一、首先打开router/index.js文件吗,把constantRoutes写的静态路由全删了,只留下公共的界面,比如login、404之类的。因为这些路由后面通过接口获取。二、在store/modules/permission.js进行修改,如果没有
·
前言:项目开发中菜单栏往往是后端基于角色控制的,所以菜单栏通过后端返回,然后在进行渲染,vue-admin这个管理系统模板用的人贼多,以此为例。
一、首先打开router/index.js文件吗,把constantRoutes写的静态路由全删了,只留下公共的界面,比如login、404之类的。其他路由后面通过接口获取。
二、在store/modules/permission.js进行修改,如果没有文件就创建,该文件使用vuex的状态管理,把菜单信息存储起来,最后把菜单渲染出去
// router/index.js下面定义写死的那个公共界面,用于拼接后端返回的菜单
import { constantRoutes } from '@/router'
// api接口
import { getRouter } from '@/api/user'
const state = {
routes: [], //最后拼接完成的路由,需要暴露出去
addRoutes: [] //后端返回的路由
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
}
}
const actions = {
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
// getRouter就是请求后端的接口
commit('SET_ROUTES', getRouter())
resolve(getRouter())
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
permission_routes: state => state.permission.routes
import permission from './modules/permission'
三,修改src目录下的permission.js,这里主要是在路由拦截那里进行路由菜单的获取。
修改如下:
store.dispatch('permission/generateRoutes').then(newRouter => {
router.addRoutes(filterRouter(newRouter))
next({ ...to, replace: true })
})
遍历处理返回的router
import Layout from '@/layout'
const filterRouter = (router) => {
const res = []
router.forEach(a => {
if (a.component === 'Layout') {
a.component = Layout
} else {
a.component = loadComponent(a.component)
}
if (a.children && a.children.length > 0) {
a.children = filterRouter(a.children)
}
res.push(a)
})
return res
}
const loadComponent = (path) => {
// 路由懒加载(参数不能头前缀"/")
return (resolve) => require([`@/views/${path}.vue`], resolve) // 这里的path='table/index'
}
注意:静态路由中,component这里是这样的
后端返回的确是"Layout"字符串,和url字符串(注意,url字符串不能以下划线 / 开头,假如静态路由地址是 component: () => import('@/views/table/index')
那么后端返回的地址必须是 component:"table/index",前面的 @/views/ 前端拼接,因为这里在使用require进行路由懒加载的时候才不会有问题。
四、修改导航菜单的渲染部分,在src/layout/components/Sidebar/index.vue中修改
<!-- 动态路由 -->
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
permission_routes
就可以喽。。。。。
更多推荐
已为社区贡献6条内容
所有评论(0)