vue导航菜单，一级路由，二级路由

route

直接引入

import HelloWorld from '@/components/HelloWorld'
{path: 'HelloWorld', name: 'HelloWorld', component:HelloWorld}

优势在于简洁明了，适用于少量的路由，但是大量路由时，比较占用资源

懒加载

{path: 'HelloWorld', name: 'HelloWorld', component: resolve => require(['@/view/vueelement/HelloWorld'], resolve)}

推荐在路由较多的时候使用此种方式，还可以将有二级路由的一级路由，单独写一个js，在index.js使用 …HelloWorld的方式导入

导航

直接导航

<el-menu router
           background-color="#409EFF"
           active-text-color="#ffd04b"
           text-color="#fff"
           :default-active="$router.path"
           mode="horizontal">
    <el-submenu index="/eltable">
      <template slot="title">表单组件</template>
      <el-menu-item index="/eltable/demo">demo</el-menu-item>
      <el-menu-item index="/eltable/example">example</el-menu-item>
      <el-menu-item index="/eltable/data">data</el-menu-item>
      <el-menu-item index="/eltable/svgIcon">svgIcon</el-menu-item>
    </el-submenu>
</el-menu>

优势，简洁明了，可以很清楚的分辨一级路由和二级路由，且可根据实际情况选择要可跳转的路由，劣势，当路由数较多时，写起来数据量较多，而且路由有变动时，导航也需要变动

遍历导航

<el-menu mode="horizontal"
             background-color="#409EFF"
             active-text-color="#ffd04b"
             text-color="#fff">
      <el-submenu v-for="(items,i) in this.$router.options.routes" :key="i" :index="items.path">
        <template slot="title">{{items.name}}</template>
        <el-menu-item v-for="(item,i) in items.children" :index="item.path" :key="i">
          <template slot="title">
            <router-link :to="items.path+'/'+item.path">
            <!--<router-link :to="'/'+items.name+'/'+item.path">-->
              <i class="el-icon-info"></i>
              {{item.name}}
            </router-link>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>

优势，在处理较多路由时，不会很麻烦，在路由发送变动时，可以不改动导航，劣势，看起来比较繁琐，不是很简洁，会显示全部路由