vue3动态路由+菜单栏的实现示例

[  
    {  
        path: '/user',  
        component: 'DEFAULT_LAYOUT',  
        meta: {menuName: '用户', order: 1},  
        children: [  
            {  
                path: 'info',  
                name: 'userInfo',  
                component: 'user/info',  
                meta: {menuName: '个人中心'}  
            }  
        ]  
    }  
]  

// /components/layout.vue  
import { ref } from 'vue'  
import { useRouter } from 'vue-router'  
// 这个布局组件需要自己提前定义好  
import DEFAULT_LAYOUT from '@/components/layout.vue'  
  
const server_route = ref([])  
  
const addRoute = async () => {  
    // 如果本地没有路由信息，就从服务器获取  
    if (!server_route.value.length) {  
        // 这里模拟从服务器获取数据，实际需要从后端获取数据  
        const { default: routes = [] } = await import('@/router/server_route')  
        server_route.value = routes  
    }  

    // 把路由表的component字段转成真实的路由  
    server_route.value.map((_route) => {  
        if (_route.component === 'DEFAULT_LAYOUT') {  
            _route.component = DEFAULT_LAYOUT  
        }  
        const children = _route.children  
        // 根据字符串动态导入路由组件  
        if (Array.isArray(children) && children?.length > 0) {  
            children.map((childRoute) => {  
                const path = childRoute.component.split('/')  
                if (path.length === 1) {  
                    childRoute.component = () => import(`@/views/${path}.vue`)  
                } else {  
                    childRoute.component = () => import(`@/views/${path[0]}/${path[1]}.vue`)  
                }  
            })  
        }  
    })  
  
    // 排序  
    server_route.value.sort((a, b) => (a?.meta?.order ?? 0) - (b?.meta?.order ?? 0))  

    // 循环添加路由  
    server_route.value.map((route) => router.addRoute(route))  
}  

// 把路由表的component字段转成真实的路由  
server_route.value.map((_route) => {  
    if (_route.component === 'DEFAULT_LAYOUT') {  
        // 设置布局组件，可以为项目设置多个布局，服务器只需要修改这里，前端就能显示多种布局了  
        _route.component = DEFAULT_LAYOUT  
    }  
    const children = _route.children  
    // 根据字符串动态导入路由组件  
    if (Array.isArray(children) && children?.length > 0) {  
        children.map((childRoute) => {  
        const path = childRoute.component.split('/')  
        // 用vite提供的动态导入功能，根据字符串从views目录下导入组件  
        // 参考：https://cn.vitejs.dev/guide/features.html#dynamic-import  
        if (path.length === 1) {  
            // 如果是单个vue文件  
            childRoute.component = () => import(`@/views/${path[0]}.vue`)  
        } else {  
            // 否则就是一个目录  
            childRoute.component = () => import(`@/views/${path[0]}/${path[1]}.vue`)  
        }  
        })  
    }  
}) 

// 路径必须以绝对路径，相对路径或@开头，文件名结尾，vite官网有说明  
// 不符合的话导入报错  
childRoute.component = () => import(`@/views/${path[0]}/${path[1]}.vue`)  

childRoute.component = () => import(`@/views/${path[0]}.vue`)  

import DEFAULT_LAYOUT from '@/components/layout.vue'  
  
server_route.value = [  
    {  
        path: '/user',  
        component: DEFAULT_LAYOUT,  
        meta: {menuName: '用户', order: 1},  
        children: [  
            {  
                path: 'info',  
                name: 'userInfo',  
                component: () => import('@/views/user/info.vue'),  
                meta: {menuName: '个人中心'}  
            }  
        ]  
    }  
]  

import { useRouter } from 'vue-router'  
const router = useRouter()  
// 排序  
server_route.value.sort((a, b) => (a?.meta?.order ?? 0) - (b?.meta?.order ?? 0))  
// 遍历转换好的路由表，添加路由  
server_route.value.map((_route) => router.addRoute(_route))  

<!-- /components/layout.vue -->  
<template>  
    <div>  
        <nav>  
            <h1>菜单栏</h1>  

            <div style="display: flex; gap: 50px; align-items: flex-end;">  
            <template v-for="menu in server_route">  
                <!-- 显示多级菜单-->  
                <div v-if="!menu.meta.single">  
                    <h5>{{ menu.meta.menuName }}</h5>  
                    <button  
                        v-for="child in menu.children"  
                        @click="router.push({name: child.name})">  
                        {{ child.meta.menuName }}  
                    </button>  
                </div>  

                <!-- 只显示一级菜单-->  
                <div v-else>  
                    <button @click="router.push({name: menu.children[0].name})">{{ menu.children[0].meta.menuName }}</button>  
                </div>  
            </template>  
            </div>  
        </nav>  

        <hr>  
        <button v-show="needAddRoutes" @click="login">模拟登录获取路由</button>  

        <main>  
            <router-view />  
        </main>  
    </div>  
</template>