vue管理系统多级路由嵌套实现侧导航

 大概效果图是这样的。

 项目目录：

 

 创建一个navData.js存放路由菜单信息，模拟访问后台接口返回的数据，navData.js中数据如下：

export default [
  {name: 'formapply',title: '表单申请',path: '/formapply',component: 'FormApply',
    children: [
      {
        name: 'formapply1',
        title: '表单申请1',
        path: '/formapply1',
        component: 'FormApply1',
        icon: '',
      },
      {
        name: 'formapply2',
        title: '表单申请2',
        path: '/formapply2',
        component: 'FormApply2',
        icon: '',
      },
    ],
  },
  {name: 'telphone',title: '资讯电话系统',path: '/telphone',component: 'Telphone'},
  {name: 'misapply',title: 'MIS Apply',path: '/misapply',component: 'MisApply'}
]

 

 app.vue中，Left 组件显示路由菜单，Main组件中通过router-view控件显示路由匹配到的页面。

Left 组件获取navData中的路由信息并显示成左侧菜单：

router的index.js文件中将navData中的路由信息配置到路由中，主要代码如下：

import navData from '@/utils/navData'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
]

navData.forEach((item) => {
  routes.push({
    path: item.path,
    name: item.name,
    component: () => import('../views/' + item.component),
    children: item.children ? pushChildren(item.children) : []    //有子路由的调用pushChildren函数配置子路由
  })
})

function pushChildren(children) {
  const childroute = []

  children.forEach((item) => {
    childroute.push({
      path: item.path,
      name: item.name,
      component: () => import('../views/' + item.component),
    })
  })
  return childroute
}

包含子路由的组件需要放置一个router-view控件用于显示子路由匹配到的组件。

如表单申请组件：

{name: 'formapply',title: '表单申请',path: '/formapply',component: 'FormApply',
    children: [
      {
        name: 'formapply1',
        title: '表单申请1',
        path: '/formapply1',
        component: 'FormApply1',
        icon: '',
      },
      {
        name: 'formapply2',
        title: '表单申请2',
        path: '/formapply2',
        component: 'FormApply2',
        icon: '',
      },
    ],
  }

FormApply组件中需要放置router-view否则子路由菜单不生效。

大概思路就是这样的，还不是很清晰，记个笔记方便以后查看。