vue-admin动态路由的实现

红太狼 2022-10-09 03:19 126阅读 0赞

> 前言：项目开发中菜单栏往往是后端基于角色控制的，所以菜单栏通过后端返回，然后在进行渲染，vue-admin这个管理系统模板用的人贼多，以此为例。

###  一、首先打开router/index.js文件吗，把constantRoutes写的静态路由全删了，只留下公共的界面，比如login、404之类的。其他路由后面通过接口获取。 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70][]

### 二、在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
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 1][]

permission_routes: state => state.permission.routes

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 2][]

import permission from './modules/permission'

### 三，修改src目录下的permission.js,这里主要是在路由拦截那里进行路由菜单的获取。 ###

修改如下：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 3][]

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这里是这样的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 4][]

后端返回的确是"Layout"字符串，和url字符串(注意，url字符串不能以下划线 / 开头,假如静态路由地址是 **component: () => import('@/views/table/index')**

那么后端返回的地址必须是 **component:"table/index"**，前面的 **@/views/ **前端拼接，因为这里在使用require进行路由懒加载的时候才不会有问题。

四、修改导航菜单的渲染部分，在src/layout/components/Sidebar/index.vue中修改

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 5][]

<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
    
    permission_routes

就可以喽。。。。。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70]: /images/20221005/2bbe5585f1184aa3812675d635a2faa5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 1]: /images/20221005/26406b3421ae4974b8fe87d6987a9021.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 2]: /images/20221005/010de904cdad4e368b587689174c1795.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 3]: /images/20221005/f5776bc866514b03b25254c07d6335fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 4]: /images/20221005/bb1ce99e579348f3814888c20b574d5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 5]: /images/20221005/a715f60ce5d942e596f0685b33279c05.png