VUE+elementUI递归实现动态路由多级菜单

最新推荐文章于 2023-09-26 21:07:43 发布

原创

最新推荐文章于 2023-09-26 21:07:43 发布 · 1.5k 阅读

标签

#vue.js #elementui #javascript

收录于

该文介绍了使用Vue.js和vue-router进行路由配置，包括首页、登录页、404页面以及带有层级结构的学生管理和数据分析等模块。同时，展示了如何通过父子组件交互动态生成左侧菜单，实现菜单与路由的联动，以及利用路由懒加载优化应用性能。

01：在路由文件设置路由信息（index.js文件）

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  // mode:history,
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      hidden: true,
      component: () => import('@/components/HelloWorld')//路由懒加载
    },
    {
      path: '/Login',
      name: 'Login',
      hidden: true,
      component: () => import('@/components/Login')
    },
    {
      path: '*',
      name: '404',
      hidden: true,
      component: () => import('@/components/404')
    },
    {
      path: '/home',
      name: '学生管理',
      menuType:'1',
      iconClass: 'fa fa-address-book-o',
      // redirect: '/home/student',
      component: () => import('@/components/home'),
      children: [
        {
          path: '/home/student',
          name: '学生列表',
          menuType:'2',
          component: () => import('@/components/student/StudentInfo')
        },