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

Java3y 发布于2019-08-23 18:12 / 941人阅读

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

更多文章

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

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

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

动态生成路由

利用 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下

超融合服务器专线服务 html建站及生成 centos添加路由 ecs添加路由 vpc添加静态路由

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104846.html

vue keep-alive实现动态缓存以及缓存销毁

摘要：实现动态缓存以及缓存销毁需求来源及描述后台管理系统中，左侧为功能菜单栏，点击菜单列表，右侧显示该菜单的功能页面，本来是一个非常简单的后台管理系统布局，现在增加了菜单按钮点击左侧菜单栏时，右侧页面头部显示当前的页面标题，形成一个列表，点击可 vue keep-alive实现动态缓存以及缓存销毁需求来源及描述后台管理系统中，左侧为功能菜单栏，点击菜单列表，右侧显示该菜单的功能页面，本来...

littleGrow 2019-08-26 10:10 评论0 收藏0
vue轻量级后台管理系统基础模板

摘要：具体实现请查看和的退出登陆回调方法。现在除了必要的页面需要在一开始添加到路由表里，其他的页面都可以根据后台数据来自动生成。另外，如果在未登陆时要访问某一指定页面，会重定向到登陆页，登陆成功后会自动跳到这个指定页面。项目地址 vue-admin-template 在线预览更新 2019.6.25 更新修复路由表冲突问题退出当前用户，换账号重新登陆时，上个账号和现在的账号路由表会有...

2shou 2019-08-23 14:17 评论0 收藏0
vue权限管理系统

摘要：权限系统后台管理系统一般都会有权限模块，用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。表为角色权限关联表，一个角色拥有哪些权限是通过这张表查出来的。这样就是一个账号角色权限的关系。 vue权限系统后台管理系统一般都会有权限模块，用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。 showImg(https://segmentfault...

bovenson 2019-08-23 14:46 评论0 收藏0
Vue 页面权限控制和登陆验证

摘要：如果一个页面，有角色越权访问，这时就得做出限制了。我们可以通过或来实现，下面用代码来展示一下如何用控制登陆验证。更多文章页面权限控制页面权限控制是什么意思呢？就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出限制了。 Vue 动态添加路由及生成菜单这是我写过的一篇文章，通过动态添加路由和菜单来做控制，...

lastSeries 2019-08-23 18:13 评论0 收藏0
vue权限管理系统

摘要：权限系统后台管理系统一般都会有权限模块，用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。表为角色权限关联表，一个角色拥有哪些权限是通过这张表查出来的。这样就是一个账号角色权限的关系。 vue权限系统后台管理系统一般都会有权限模块，用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。 showImg(https://segmentfault...

freecode 2019-08-01 10:22 评论0 收藏0