vue(四）vue3 + vite + routes 动态获取

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 + '/' + utePathresult.push({path: utePath,redirect: redirect + '/' + direct,children: getRouteObj(obj.children, redirect)})} else {result.push({path: utePath,component: () => import('/src' + dePath)})}}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}