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控件显示路由匹配到的页面。

<template>
  <el-container>
    <el-aside width="200px">
      <Left />
    </el-aside>
    <el-container>
      <el-header><Header /></el-header>
      <el-main><Main /></el-main>
    </el-container>
  </el-container>
</template>

<style></style>

<script>
import Left from ./components/Left.vue
import Main from ./components/Main.vue
import Header from ./components/Header.vue

export default {
  name: Layout,
  components: {
    Left,
    Main,
    Header,
  },
}
</script>

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

<template>
  <div class="left">
    <el-menu router>
      <div v-for="(nav, index) in navData" :key="index">

        <el-sub-menu v-if="nav.children">    //有子路由的显示为二级菜单
          <template #title>
            <el-icon><location /></el-icon>
            <span>{
         
  { nav.title }}</span>
          </template>
          <el-menu-item v-for="(item, index2) in nav.children" :key="index2" :index="item.path" >
            <el-icon><location /></el-icon>
            <span>{
         
  { item.title }}</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item v-if="!nav.children" :index="nav.path">//没有子路由显示为一级菜单
          <el-icon><location /></el-icon>
          <span>{
         
  { nav.title }}</span>
        </el-menu-item>
        
      </div>
    </el-menu>
  </div>
</template>

<script>
import navData from @/utils/navData

export default {
  name: Left,
  data() {
    return {
      navData: navData
    }
  }
}
</script>

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否则子路由菜单不生效。

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