vue-admin-element 动态路由

最新推荐文章于 2024-06-24 19:21:01 发布

前端装酷大神哥

最新推荐文章于 2024-06-24 19:21:01 发布

阅读量259

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wfg93/article/details/129120036

版权

该代码示例展示了如何在Vue项目中，通过Vuex管理动态路由，特别是如何将服务器返回的数据递归地整合到路由配置中。`generateAsyncRouter`函数用于处理递归，将异步获取的路由数据与本地路由映射结合，生成可访问的路由列表。

摘要由CSDN通过智能技术生成

把模板下载下来后
修改vuex里面的 permission 改成递归

import { constantRoutes, routerMap } from '@/router'
import { asyncRoutesapi } from '@/api/router'

function generateAsyncRouter(routerMap, serverRouterMap) {
    serverRouterMap.forEach(function(item, index) {
        item.component = routerMap[item.component]
        if (item.children && item.children.length > 0) {
            generateAsyncRouter(routerMap, item.children)
        }
    })
    return serverRouterMap
}

const state = {
    routes: [],
    addRoutes: []
}

const mutations = {
    SET_ROUTES: (state, routes) => {
        state.addRoutes = routes
        state.routes = constantRoutes.concat(routes)
    }
}

const actions = {
    generateRoutes({ commit }, role) {
        return new Promise(resolve => {
            const accessedRoutes = generateAsyncRouter(routerMap, asyncRoutesapi);
            console.log(accessedRoutes);
            accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
            commit('SET_ROUTES', accessedRoutes)

            resolve(accessedRoutes)
                // getList({ role: role }).then(Response => {
                //     const accessedRoutes = generateAsyncRouter(routerMap, Response.data.component_list)
                //     accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
                //     commit('SET_ROUTES', accessedRoutes)
                //     resolve(accessedRoutes)
                // })
        })
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

然后在 router的index里面加上routerMap

// 动态态路由
export const routerMap = {
    Layout: () =>
        import ('@/layout'),
    SubmitForm: () =>
        import ('@/views/submitForm/index'),
    Duck: () =>
        import ('@/views/poultry/duck/index'),
    Chicken: () =>
        import ('@/views/poultry/chicken/index'),
    Fruit: () =>
        import ('@/views/physical/fruit/index'),
    Vegetable: () =>
        import ('@/views/physical/vegetable/index'),
}

在 vuex里面循环就行其他就是一模一样就行了