VUE动态路由菜单

vue-admin-template的菜单数据是写死的,可以改成数据库查询动态展示

1 保留基础路由

特别注意,原配置中的*配置要注释或删除,否则后续配置完成后动态菜单刷新会报404错误,该配置需要在addRoutes添加,见后续说明

VUE动态路由菜单_第1张图片

2 获取后端菜单数据

修改getInfo方法,获取菜单数据并保存到vuex中;同时还需后端java接口做好了菜单数据准备

VUE动态路由菜单_第2张图片

VUE动态路由菜单_第3张图片

注:如果后端没准备好,这里menus可以先直接定义数组测试,参考数组

[{
    "component": "Layout",
    "path": "/user",
    "redirect": "/user/list",
    "name": "userManage",
    "meta": {
        "icon": "userManage",
        "title": "用户管理"
    },
    "children": [{
        "component": "user/user",
        "path": "list",
        "name": "userList",
        "meta": {
            "icon": "userList",
            "title": "用户列表"
        }
    }, {
        "component": "user/role",
        "path": "role",
        "name": "roleList",
        "meta": {
            "icon": "role",
            "title": "角色列表"
        }
    }, {
        "component": "user/permission",
        "path": "permission",
        "name": "permissionList",
        "meta": {
            "icon": "permission",
            "title": "权限列表"
        }
    }]
}]

VUE动态路由菜单_第4张图片

3 动态生成路由

根据环境配置导入组件,在vue中,将菜单路径作为参数,实现路由地址的注入

在 src/router 文件夹下,建立两个文件,各只需添加一行代码, 定义导入方法

src/router/_import_development.js

//开发环境导入组件   
module.exports = file => require('@/views/' + file + '.vue').default
src/router/_import_production.js

//生产环境导入组件
module.exports = file => () => import('@/views/' + file + '.vue')
特别注意:上述路径views后面不要遗漏斜杠

4 生成路由

在路由钩子中,过滤路由,并生成路由,核心在src目录下的permission.js中,修改router.beforeEach路由钩子

VUE动态路由菜单_第5张图片

VUE动态路由菜单_第6张图片

VUE动态路由菜单_第7张图片

5 合并路由

VUE动态路由菜单_第8张图片

你可能感兴趣的:(vue,动态路由菜单)