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

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