Vue 动态添加路由及生成菜单

摘要：更多文章写后台管理系统，估计有不少人遇过这样的需求根据后台数据动态添加路由和菜单。先看一下官方介绍动态添加更多的路由规则。

写后台管理系统，估计有不少人遇过这样的需求：根据后台数据动态添加路由和菜单。

为什么这么做呢？因为不同的用户有不同的权限，能访问的页面是不一样的。

在网上找了好多资料，终于想到了解决办法。

利用 vue-router 的 addRoutes 方法可以动态添加路由。

先看一下官方介绍：

router.addRoutes

router.addRoutes(routes: Array)

动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

举个例子：

const router = new Router({
    routes: [
        {
            path: "/login",
            name: "login",
            component: () => import("../components/Login.vue")
        },
        {path: "/", redirect: "/home"},
    ]   
})

上面的代码和下面的代码效果是一样的

const router = new Router({
    routes: [
        {path: "/", redirect: "/home"},
    ]   
})

router.addRoutes([
    {
        path: "/login",
        name: "login",
        component: () => import("../components/Login.vue")
    }
])

在动态添加路由的过程中，如果有 404 页面，一定要放在最后添加，否则在登陆的时候添加完页面会重定向到 404 页面。

类似于这样，这种规则一定要最后添加。

{path: "*", redirect: "/404"}

假设后台返回来的数据长这样

// 左侧菜单栏数据
menuItems: [
    {
        name: "home", // 要跳转的路由名称 不是路径
        size: 18, // icon大小
        type: "md-home", // icon类型
        text: "主页" // 文本内容
    },
    {
        text: "二级菜单",
        type: "ios-paper",
        children: [
            {
                type: "ios-grid",
                name: "t1",
                text: "表格"
            },
            {
                text: "三级菜单",
                type: "ios-paper",
                children: [
                    {
                        type: "ios-notifications-outline",
                        name: "msg",
                        text: "查看消息"
                    },
                    {
                        type: "md-lock",
                        name: "password",
                        text: "修改密码"
                    },
                    {
                        type: "md-person",
                        name: "userinfo",
                        text: "基本资料",
                    }
                ]
            }
        ]
    }
]

来看看怎么将它转化为菜单栏，我在这里使用了 iview 的组件，不用重复造轮子。

    
    

        
            
            

                
                    
                    
                        
                        {{threeItem.text}}
                    
                
                
                    
                    {{subItem.text}}
                
            
        
        
            
            {{item.text}}
        
    

代码不用看得太仔细，理解原理即可，其实就是通过三次 v-for 不停的对子数组进行循环，生成三级菜单。

动态菜单这样就可以实现了。

动态路由，因为上面已经说过了用 addRoutes 来实现，现在看看具体怎么做。

首先，要把项目所有的页面路由都列出来，再用后台返回来的数据动态匹配，能匹配上的就把路由加上，不能匹配上的就不加。
最后把这个新生成的路由数据用 addRoutes 添加到路由表里。

const asyncRoutes = {
    "home": {
        path: "home",
        name: "home",
        component: () => import("../views/Home.vue")
    },
    "t1": {
        path: "t1",
        name: "t1",
        component: () => import("../views/T1.vue")
    },
    "password": {
        path: "password",
        name: "password",
        component: () => import("../views/Password.vue")
    },
    "msg": {
        path: "msg",
        name: "msg",
        component: () => import("../views/Msg.vue")
    },
    "userinfo": {
        path: "userinfo",
        name: "userinfo",
        component: () => import("../views/UserInfo.vue")
    }
}

// 传入后台数据 生成路由表
menusToRoutes(menusData)

// 将菜单信息转成对应的路由信息 动态添加
function menusToRoutes(data) {
    const result = []
    const children = []

    result.push({
        path: "/",
        component: () => import("../components/Index.vue"),
        children,
    })

    data.forEach(item => {
        generateRoutes(children, item)
    })

    children.push({
        path: "error",
        name: "error",
        component: () => import("../components/Error.vue")
    })

    // 最后添加404页面 否则会在登陆成功后跳到404页面
    result.push(
        {path: "*", redirect: "/error"},
    )

    return result
}

function generateRoutes(children, item) {
    if (item.name) {
        children.push(asyncRoutes[item.name])
    } else if (item.children) {
        item.children.forEach(e => {
            generateRoutes(children, e)
        })
    }
}

所有的代码实现，我都放在 github 上，动态菜单的实现放在这个项目下的 src/components/Index.vue、src/permission.js 和 src/utils/index.js下