使用vue-element-admin的三级路由时，第二级路由的component应该如何设置

在使用vue-element-admin的三级路由时，第二级路由的component需要设置成一个父级组件，该组件需要包含一个<router-view>标签，用于渲染第三级路由的组件。具体的实现方式如下：

1. 在router/index.js中定义第二级路由，如下所示：

{
  path: '/parent',
  component: Layout,
  children: [
    {
      path: 'child',
      component: () => import('@/views/child/index'),
      name: 'Child',
      meta: { title: 'Child', icon: 'el-icon-s-help' }
    }
  ]
}

2. 在views目录下创建一个名为child的文件夹，用于存放第三级路由的组件。

3. 在child文件夹下创建一个名为index.vue的文件，该文件就是第三级路由的组件。

4. 在父级组件的模板中添加<router-view>标签，用于渲染第三级路由的组件。

<template>
  <div>
    <h1>Parent Component</h1>
    <<router-view></router-view>
  </div>
</template>

这样就可以实现vue-element-admin的三级路由了。

相关问题

使用vue-element-admin的三级路由时，如何将二组路由的component设置为空

在Vue-Element-Admin中，您可以将二级路由的component设置为空，以便在导航菜单中显示二级路由，但不会显示任何内容。要做到这一点，您可以在路由配置中将component设置为一个空的布局组件，如下所示：

{
  path: '/example',
  component: Layout,
  redirect: '/example/table',
  name: 'Example',
  meta: { title: 'Example', icon: 'example' },
  children: [
    {
      path: 'table',
      name: 'Table',
      component: () => import('@/views/table/index'),
      meta: { title: 'Table', icon: 'table' }
    },
    {
      path: 'empty',
      name: 'Empty',
      component: () => import('@/views/empty/index'),
      meta: { title: 'Empty' }
    }
  ]
}

在上面的示例中，我们将'/example'的component设置为Layout组件，它将成为二级路由的父级容器。然后，我们将'/example/table'的component设置为一个正常的组件，它将显示在Layout组件中。最后，我们将'/example/empty'的component设置为一个空的组件，在导航菜单中显示但不显示任何内容。

注意：空组件的代码如下所示：

<template>
  <div></div>
</template>

<script>
export default {
  name: 'Empty'
}
</script>

以上代码只包含一个空的div元素，因为我们不需要在空组件中显示任何内容。

vue-element-admin的三级路由如何使用

要使用vue-element-admin的三级路由，需要进行以下步骤：

1. 在src/router/index.js文件中定义路由。

2. 在src/views/layout/components/Sidebar/index.vue文件中定义导航菜单。

3. 在src/views/layout/components/SidebarItem.vue文件中定义导航菜单子项。

下面是一个简单的示例：

// src/router/index.js

import Layout from '@/layout'

const routes = [
  {
    path: '/dashboard',
    component: Layout,
    redirect: '/dashboard/index',
    children: [
      {
        path: 'index',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: { title: 'Dashboard', icon: 'dashboard' }
      }
    ]
  },
  {
    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: 'Example', icon: 'example' },
    children: [
      {
        path: 'table',
        name: 'Table',
        component: () => import('@/views/table/index'),
        meta: { title: 'Table', icon: 'table' }
      },
      {
        path: 'tree',
        name: 'Tree',
        component: () => import('@/views/tree/index'),
        meta: { title: 'Tree', icon: 'tree' },
        children: [
          {
            path: 'list',
            name: 'TreeList',
            component: () => import('@/views/tree/list'),
            meta: { title: 'Tree List', icon: 'list' }
          },
          {
            path: 'detail',
            name: 'TreeDetail',
            component: () => import('@/views/tree/detail'),
            meta: { title: 'Tree Detail', icon: 'detail' }
          }
        ]
      }
    ]
  }
]

export default routes

<!-- src/views/layout/components/Sidebar/index.vue -->

<template>
  <div class="sidebar-container">
    <el-scrollbar wrap-class="sidebar-wrapper">
      <el-menu
        :default-active="$route.path"
        mode="vertical"
        :collapse="sidebar.opened"
        :unique-opened="true"
        :default-openeds="sidebar.openeds"
        class="el-menu-vertical-demo sidebar-menu"
        router
        collapse-transition
      >
        <sidebar-item v-for="item in sidebar.items" :key="item.index" :item="item" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import SidebarItem from './SidebarItem'

export default {
  name: 'Sidebar',
  components: {
    SidebarItem
  },
  props: {
    sidebar: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<!-- src/views/layout/components/SidebarItem.vue -->

<template>
  <div>
    <template v-if="!item.children">
      <el-menu-item :index="item.path" :route="{ path: item.path }">
        <i :class="`iconfont ${item.meta.icon}`"></i>
        <span slot="title">{{ item.meta.title }}</span>
      </el-menu-item>
    </template>
    <template v-else>
      <el-submenu :index="item.path">
        <template slot="title">
          <i :class="`iconfont ${item.meta.icon}`"></i>
          <span>{{ item.meta.title }}</span>
        </template>
        <sidebar-item v-for="child in item.children" :key="child.path" :item="child" />
      </el-submenu>
    </template>
  </div>
</template>

<script>
import SidebarItem from './SidebarItem'

export default {
  name: 'SidebarItem',
  components: {
    SidebarItem
  },
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

在这个示例中，我们定义了一个路由配置，包含了两个一级路由，即/dashboard和/example，以及一个二级路由/example/tree，它包含了两个三级路由/example/tree/list和/example/tree/detail。然后在Sidebar组件中，我们使用了一个递归组件SidebarItem来渲染导航菜单，这个组件可以处理任意层级的菜单项。在SidebarItem组件中，我们根据是否存在子菜单来渲染el-menu-item或el-submenu，然后递归渲染子菜单。

使用vue-element-admin的三级路由需要注意以下几点：

1. 三级路由需要在二级路由的children属性中定义。

2. 导航菜单需要使用递归组件来渲染。

3. 递归渲染组件需要注意性能问题，可以使用v-for的key来优化。