[JavaScript知识库]vue(四）vue3 + vite + routes 动态获取

作用:使用一份配置文件用于路由与菜单

版本说明：

"dependencies": {

? ? "element-plus": "^2.2.17",

? ? "vue": "^3.2.39",

? ? "vue-router": "^4.1.5"

? },

? "devDependencies": {

? ? "@vitejs/plugin-vue": "^3.1.0",

? ? "fast-glob": "^3.2.12",

? ? "vite": "^3.1.0",

? ? "vite-plugin-svg-icons": "^2.0.1"

? }

router_config.js

import { createRouter, createWebHistory } from 'vue-router'
import layout from '../layout/layout_index.vue'
import notFound from './public/not_found.vue'
import { menuConfig } from '../layout/menu_config.js'

const routes = []
function getRouteObj(objArr, path) {
    const result = []
    if (!path) path = ''
    for (let t = 0; t < objArr.length; t++) {
        let obj = objArr[t]
        if (obj.children) {
            let redirect = path + '/' + obj.routePath
            result.push({
                path: obj.routePath,
                redirect: redirect + '/' + obj.redirect,
                children: getRouteObj(obj.children, redirect)
            })
        } else {
            result.push({
                path: obj.routePath,
                component: () => import('/src' + obj.codePath)
            })
        }
    }
    return result
}

routes.push({
    path: '/',
    component: layout,
    redirect: '/home',
    children: getRouteObj(menuConfig)
})
routes.push({
    path: '/:pathMatch(.*)*', name: 'NotFound', component: notFound
})

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

menu_config.js

const menuConfig = [
    {
        /**
         * name 显示名称
         * routePath 路由在浏览器的url路径
         * icon svg图标
         * codePath 子页面文件路径
         * redirect 重定向,指向应该访问的子页面
         */
        name:'Home',
        routePath: 'home',
        icon: 'caiselijia',
        redirect: 'status',
        children: [
            {
                name:'status',
                routePath: 'home',
                codePath: '/views/home.vue'
            },
        ]
    },
    {
        name:'Interent',
        routePath: 'internet',
        icon: 'caisehuiyi',
        redirect: 'status',
        children: [
            {
                name:'Status',
                routePath: 'status',
                redirect: 'dsl',
                children: [
                    {
                        name:'DSL',
                        routePath: 'dsl',
                        codePath: '/views/internet/status/dsl.vue'
                    },
                    {
                        name:'Ethernet',
                        routePath: 'eth',
                        codePath: '/views/internet/status/eth.vue'
                    },
                    {
                        name:'3G',
                        routePath: '3g',
                        codePath: '/views/internet/status/3g.vue'
                    },
                    {
                        name:'6RD',
                        routePath: '6rd',
                        codePath: '/views/internet/status/6rd.vue'
                    }
                ]
            },
            {
                name:'WAN',
                routePath: 'wan',
                codePath: '/views/internet/wan.vue'
            },
            {
                name:'QoS',
                routePath: 'qos',
                codePath: '/views/internet/qos.vue'
            },
            {
                name:'Security',
                routePath: 'security',
                codePath: '/views/internet/security.vue'
            }
        ]
    },
    {
        name:'Local Network',
        routePath: 'network',
        icon: 'xiyiji',
        children: [
            {
                name:'Status',
                routePath: 'status',
                codePath: ''
            },
            {
                name:'WLAN',
                routePath: 'wlan',
                codePath: ''
            }
        ]
    },
    {
        name:'VoIP',
        routePath: 'voip',
        icon: 'xiyiji',
        children: [
            {
                name:'Status',
                routePath: 'status',
                codePath: ''
            },
            {
                name:'Basic',
                routePath: 'wlan',
                codePath: ''
            }
        ]
    },
    {
        name:'Management & Diagnosis',
        routePath: 'management',
        icon: 'yizi',
        children: [
            {
                name:'Status',
                routePath: 'status',
                codePath: ''
            },
            {
                name:'Account Management',
                routePath: 'account',
                codePath: ''
            }
        ]
    },
]

export {menuConfig}