Skip to content

动态路由配置

动态路由格式

js
[
    {
        "id": 2,
        "parentId": 0,
        "name": "系统管理",
        "type": 0,
        "path": "system",
        "component": "",
        "perms": null,
        "icon": "Setting",
        "sortValue": 1,
        "activeMenu": null,
        "isHide": false,
        "status": 1,
        "createTime": "2021-06-01 02:05:37",
        "updateTime": "2024-08-09 16:35:56",
        "isDeleted": 0,
        "meta": {
            "title": "系统管理",
            "icon": "Setting",
            "activeMenu": "",
            "isHide": false,
            "perms": null
        },
        "children": [
            {
                "id": 3,
                "parentId": 2,
                "name": "用户管理",
                "type": 1,
                "path": "/system/user",
                "component": "/system/user",
                "perms": "",
                "icon": "UserFilled",
                "sortValue": 1,
                "activeMenu": null,
                "isHide": false,
                "status": 1,
                "createTime": "2021-06-01 02:05:37",
                "updateTime": "2024-08-09 16:11:30",
                "isDeleted": 0,
                "meta": {
                    "title": "用户管理",
                    "icon": "UserFilled",
                    "activeMenu": "",
                    "isHide": false,
                    "perms": [
                        "bt.sysUser.page",
                        "bt.sysUser.add",
                        "bt.sysUser.update",
                        "bt.sysUser.remove",
                        "bt.sysUser.assignRole"
                    ]
                },
                "children": null,
                "select": false
            },
            {
                "id": 4,
                "parentId": 2,
                "name": "角色管理",
                "type": 1,
                "path": "/system/role",
                "component": "/system/role",
                "perms": "",
                "icon": "Tools",
                "sortValue": 2,
                "activeMenu": null,
                "isHide": false,
                "status": 1,
                "createTime": "2021-06-01 02:05:37",
                "updateTime": "2024-08-11 17:19:30",
                "isDeleted": 0,
                "meta": {
                    "title": "角色管理",
                    "icon": "Tools",
                    "activeMenu": "",
                    "isHide": false,
                    "perms": [
                        "bt.sysRole.list",
                        "bt.sysRole.add",
                        "bt.sysRole.update",
                        "bt.sysRole.remove",
                        "bt.sysRole.assignAuth"
                    ]
                },
                "children": null,
                "select": false
            },
            {
                "id": 5,
                "parentId": 2,
                "name": "菜单管理",
                "type": 1,
                "path": "/system/menu",
                "component": "/system/menu",
                "perms": "",
                "icon": "Menu",
                "sortValue": 3,
                "activeMenu": null,
                "isHide": false,
                "status": 1,
                "createTime": "2021-06-01 02:05:37",
                "updateTime": "2024-08-23 07:36:17",
                "isDeleted": 0,
                "meta": {
                    "title": "菜单管理",
                    "icon": "Menu",
                    "activeMenu": "",
                    "isHide": false,
                    "perms": [
                        "bt.sysMenu.list",
                        "bt.sysMenu.add",
                        "bt.sysMenu.update",
                        "bt.sysMenu.remove"
                    ]
                },
                "children": null,
                "select": false
            },
            {
                "id": 20,
                "parentId": 2,
                "name": "部门管理",
                "type": 1,
                "path": "/system/department",
                "component": "/system/department",
                "perms": "",
                "icon": "Menu",
                "sortValue": 4,
                "activeMenu": null,
                "isHide": false,
                "status": 1,
                "createTime": "2022-05-24 18:07:05",
                "updateTime": "2024-08-11 17:17:15",
                "isDeleted": 0,
                "meta": {
                    "title": "部门管理",
                    "icon": "Menu",
                    "activeMenu": "",
                    "isHide": false,
                    "perms": [
                        "bt.sysDept.list",
                        "bt.sysDept.add",
                        "bt.sysDept.update",
                        "bt.sysDept.remove"
                    ]
                },
                "children": null,
                "select": false
            },
            {
                "id": 22,
                "parentId": 2,
                "name": "岗位管理",
                "type": 1,
                "path": "/system/post",
                "component": "/system/post",
                "perms": "",
                "icon": "Menu",
                "sortValue": 5,
                "activeMenu": null,
                "isHide": false,
                "status": 1,
                "createTime": "2022-05-24 18:25:30",
                "updateTime": "2024-08-11 17:20:19",
                "isDeleted": 0,
                "meta": {
                    "title": "岗位管理",
                    "icon": "Menu",
                    "activeMenu": "",
                    "isHide": false,
                    "perms": [
                        "bt.sysPost.list",
                        "bt.sysPost.add",
                        "bt.sysPost.update",
                        "bt.sysPost.remove"
                    ]
                },
                "children": null,
                "select": false
            },
            {
                "id": 34,
                "parentId": 2,
                "name": "日志管理",
                "type": 0,
                "path": "",
                "component": "",
                "perms": "",
                "icon": "Document",
                "sortValue": 6,
                "activeMenu": null,
                "isHide": false,
                "status": 1,
                "createTime": "2022-05-31 21:23:07",
                "updateTime": "2024-08-11 17:54:22",
                "isDeleted": 0,
                "meta": {
                    "title": "日志管理",
                    "icon": "Document",
                    "activeMenu": "",
                    "isHide": false,
                    "perms": []
                },
                "children": null,
                "select": false
            }
        ],
        "select": false
    },
    {
        "id": 45,
        "parentId": 0,
        "name": "专辑管理",
        "type": 0,
        "path": "album",
        "component": null,
        "perms": null,
        "icon": "Film",
        "sortValue": 1,
        "activeMenu": null,
        "isHide": false,
        "status": 1,
        "createTime": "2023-05-31 21:59:44",
        "updateTime": "2024-08-23 00:57:52",
        "isDeleted": 0,
        "meta": {
            "title": "专辑管理",
            "icon": "Film",
            "activeMenu": "",
            "isHide": false,
            "perms": null
        },
        "children": [
            {
                "id": 46,
                "parentId": 45,
                "name": "专辑列表",
                "type": 1,
                "path": "/album/albumList",
                "component": "/album/albumList/albumList",
                "perms": null,
                "icon": "List",
                "sortValue": 1,
                "activeMenu": null,
                "isHide": false,
                "status": 1,
                "createTime": "2023-05-31 22:01:32",
                "updateTime": "2023-05-31 22:01:32",
                "isDeleted": 0,
                "meta": {
                    "title": "专辑列表",
                    "icon": "List",
                    "activeMenu": "",
                    "isHide": false,
                    "perms": [
                        "bt.album.viewDetail",
                        "bt.album.passAndNotPass"
                    ]
                },
                "children": null,
                "select": false
            },
            {
                "id": 55,
                "parentId": 45,
                "name": "声音管理",
                "type": 1,
                "path": "/album/trackList",
                "component": "/album/trackList/trackList",
                "perms": null,
                "icon": "Headset",
                "sortValue": 1,
                "activeMenu": null,
                "isHide": false,
                "status": 1,
                "createTime": "2023-05-31 22:53:48",
                "updateTime": "2024-08-15 15:44:17",
                "isDeleted": 0,
                "meta": {
                    "title": "声音管理",
                    "icon": "Headset",
                    "activeMenu": "",
                    "isHide": false,
                    "perms": [
                        "bt.track.viewTrackDetail",
                        "bt.track.viewTrackDetail"
                    ]
                },
                "children": null,
                "select": false
            },
            {
                "id": 58,
                "parentId": 45,
                "name": "分类管理",
                "type": 1,
                "path": "/album/category",
                "component": "/album/category/category",
                "perms": null,
                "icon": "Menu",
                "sortValue": 1,
                "activeMenu": null,
                "isHide": false,
                "status": 1,
                "createTime": "2023-05-31 22:59:23",
                "updateTime": "2023-05-31 22:59:55",
                "isDeleted": 0,
                "meta": {
                    "title": "分类管理",
                    "icon": "Menu",
                    "activeMenu": "",
                    "isHide": false,
                    "perms": null
                },
                "children": null,
                "select": false
            },
            {
                "id": 59,
                "parentId": 45,
                "name": "分类属性管理",
                "type": 1,
                "path": "/album/categoryAttribute",
                "component": "/album/categoryAttribute/categoryAttribute",
                "perms": null,
                "icon": "Grid",
                "sortValue": 1,
                "activeMenu": null,
                "isHide": false,
                "status": 1,
                "createTime": "2023-05-31 23:00:27",
                "updateTime": "2023-05-31 23:00:27",
                "isDeleted": 0,
                "meta": {
                    "title": "分类属性管理",
                    "icon": "Grid",
                    "activeMenu": "",
                    "isHide": false,
                    "perms": null
                },
                "children": null,
                "select": false
            }
        ],
        "select": false
    },
    {
        "id": 50,
        "parentId": 0,
        "name": "订单管理",
        "type": 0,
        "path": "order",
        "component": "",
        "perms": null,
        "icon": "DocumentCopy",
        "sortValue": 5,
        "activeMenu": null,
        "isHide": false,
        "status": 1,
        "createTime": "2023-05-31 22:27:33",
        "updateTime": "2024-08-23 00:51:18",
        "isDeleted": 0,
        "meta": {
            "title": "订单管理",
            "icon": "DocumentCopy",
            "activeMenu": "",
            "isHide": false,
            "perms": null
        },
        "children": [
            {
                "id": 51,
                "parentId": 50,
                "name": "订单列表",
                "type": 1,
                "path": "/order/orderList",
                "component": "/order/orderList/orderList",
                "perms": null,
                "icon": "List",
                "sortValue": 1,
                "activeMenu": null,
                "isHide": false,
                "status": 1,
                "createTime": "2023-05-31 22:43:50",
                "updateTime": "2024-08-15 15:38:34",
                "isDeleted": 0,
                "meta": {
                    "title": "订单列表",
                    "icon": "List",
                    "activeMenu": "",
                    "isHide": false,
                    "perms": [
                        "bt.order.viewOrderDetail"
                    ]
                },
                "children": null,
                "select": false
            }
        ],
        "select": false
    },
    {
        "id": 53,
        "parentId": 0,
        "name": "会员管理",
        "type": 0,
        "path": "member",
        "component": "",
        "perms": null,
        "icon": "UserFilled",
        "sortValue": 1,
        "activeMenu": null,
        "isHide": false,
        "status": 1,
        "createTime": "2023-05-31 22:46:13",
        "updateTime": "2024-08-15 15:41:34",
        "isDeleted": 0,
        "meta": {
            "title": "会员管理",
            "icon": "UserFilled",
            "activeMenu": "",
            "isHide": false,
            "perms": null
        },
        "children": [
            {
                "id": 54,
                "parentId": 53,
                "name": "会员列表",
                "type": 1,
                "path": "/member/memberList",
                "component": "/member/memberList/memberList",
                "perms": null,
                "icon": "UserFilled",
                "sortValue": 1,
                "activeMenu": null,
                "isHide": false,
                "status": 1,
                "createTime": "2023-05-31 22:47:31",
                "updateTime": "2023-05-31 22:47:31",
                "isDeleted": 0,
                "meta": {
                    "title": "会员列表",
                    "icon": "UserFilled",
                    "activeMenu": "",
                    "isHide": false,
                    "perms": null
                },
                "children": null,
                "select": false
            }
        ],
        "select": false
    }
]

router配置

index.js

js
import { createRouter, createWebHashHistory } from "vue-router";
import { constantRoute } from "./routes";
import useLayoutSettingStore from "@/store/modules/setting";
import useUserStore from "@/store/modules/user";
import { ref } from "vue";
import nProgress from "nprogress";
import 'nprogress/nprogress.css'
const modules = import.meta.glob(['../views/system/**/index.vue'])

let router = createRouter({
    history: createWebHashHistory(),
    routes: constantRoute,
    scrollBehavior() {
        return {
            left: 0,
            top: 0
        }
    }
})

let dynamicRouteFlag = ref(false)

router.beforeEach((to, _from, next) => {
    nProgress.start()
    if (to.path != '/404') {
        useLayoutSettingStore().path = to.path;
    }
    if (useUserStore().token) {
        if (to.path == '/login') {
            next('/')
        } else {
            if (dynamicRouteFlag.value) {
                next()
            } else {
                loadDynamicRoute();
                dynamicRouteFlag.value = true//6.不让重复添加
                router.push({ path: useLayoutSettingStore().path })
            }
        }
    } else {
        //1.没有登陆,则进入登陆界面
        if (to.path == '/login') {
            next()
        } else {
            next({ path: '/login', query: { redirect: to.path } })
        }
    }
})


const loadDynamicRoute = () => {
    useUserStore().dynamicRoutes.forEach((route) => {
        router.addRoute({ path: "/" + route.path, name: route.name, meta: route.meta, component: () => import("@/layout/index.vue") });
        if (route && route.children && route.children.length > 0) {
            route.children.forEach((routeItem) => {
                router.addRoute(route.name, { name: routeItem.name, path: `${routeItem.path}`, meta: routeItem.meta, component: modules[`../views${routeItem.component}/index.vue`] })
                if (routeItem.children) {
                    routeItem.children.forEach((item) => {
                        router.addRoute(route.name, { name: item.name, path: `${item.path}`, meta: item.meta, component: modules[`../views${item.component}/index.vue`] })
                    })
                };
            })
        }
    })
}


router.afterEach((_to, _from) => {
    nProgress.done()
})

export default router

路由配置

routes.js

js
export const constantRoute = [
    {
        path: '/login',
        component: () => import('@/views/login/index.vue'),
        name: 'login',
        meta: {
            title: '登陆',//菜单标题
            isHide: true
        }
    },
    {
        path: '/',
        component: () => import('@/layout/index.vue'),
        name: 'layout',
        meta: {
            title: '',//菜单标题
            isHide: false,
            icon: 'HomeFilled'
        },
        children: [
            {
                path: '/home',
                component: () => import('@/views/home/index.vue'),
                name: 'home',
                meta: {
                    title: '首页',//菜单标题
                    icon: 'HomeFilled'
                },
            }
        ],
        redirect: '/home'
    },
    {
        path: '/404',
        component: () => import('@/views/404/index.vue'),
        name: '404',
        meta: {
            title: '404',//菜单标题
            isHide: true
        }
    },
    {
        path: '/:pathMatch(.*)*',
        redirect: '/404',
        name: 'Any',
        meta: {
            title: '任意路由',//菜单标题
            isHide: true
        }
    }
]