Element-ui实现左侧二级导航

这里使用的Element文档版本是2.13.1。

路由文件index.js：

import Vue from 'vue'
import Router from 'vue-router'
import Form from '@/components/Form'
import Data from '@/components/Data'
import Radio from '@/components/Radio'
import Checkbox from '@/components/Checkbox'
import Table from '@/components/Table'
import Tag from '@/components/Tag'
import Button from '@/components/Button'
import Tabs from '@/components/Tabs'
import Echarts from '@/components/Echarts'

Vue.use(Router);

let router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'index',
      redirect: '/form/radio'
    },
    {
      path: '/form',
      name: 'form',
      component: Form,
      meta: {
        title: 'Form',
        icon: 'el-icon-eleme'
      },
      children: [
        {
          path: '/form/radio',
          name: 'radio',
          component: Radio,
          meta: {
            title: 'Radio'
          }
        },
        {
          path: '/form/checkbox',
          name: 'checkbox',
          component: Checkbox,
          meta: {
            title: 'Checkbox'
          }
        }
      ]
    },
    {
      path: '/data',
      name: 'data',
      component: Data,
      meta: {
        title: 'Data',
        icon: 'el-icon-upload'
      },
      children: [
        {
          path: '/data/table',
          name: 'table',
          component: Table,
          meta: {
            title: 'Table'
          }
        },
        {
          path: '/data/tag',
          name: 'tag',
          component: Tag,
          meta: {
            title: 'Tag'
          }
        }
      ]
    },
    {
      path: '/button',
      name: 'button',
      component: Button,
      meta: {
        title: 'Button',
        icon: 'el-icon-s-order'
      }
    },
    {
      path: '/tabs',
      name: 'tabs',
      component: Tabs,
      meta: {
        title: 'Tabs',
        icon: 'el-icon-s-ticket'
      }
    },
    {
      path: '/echarts',
      name: 'echarts',
      component: Echarts,
      meta: {
        title: 'Echarts',
        icon: 'el-icon-s-marketing'
      }
    }
  ]
});

export default router

App.vue：

其中''中的''是关键，不然没法导航到相关组件。

Form.vue、Data.vue组件模板中需要添加''。