vue-admin动态路由的实现

Posted 2022-03-03 程序员超时空

前言：项目开发中菜单栏往往是后端基于角色控制的，所以菜单栏通过后端返回，然后在进行渲染，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

就可以喽。。。。。