el-menu 导航栏学习（1）

最简单的导航栏学习跳转实例效果：

（1）index.js路由配置：

import Vue from 'vue'

import Router from 'vue-router'

import NavMenuDemo from '@/components/NavMenuDemo'

import test1 from '@/components/test1'

import test2 from '@/components/test2'

import test3 from '@/components/test3'

Vue.use(Router)

export default new Router({

  routes: [{

    path: '/',

    name: 'NavMenuDemo',

    component: NavMenuDemo,

    children: [{

      path: '/test1',

      name: 'test1',

      component: test1

    }, {

      path: '/test2',

      name: 'test2',

      component: test2

    }, {

      path: '/test3',

      name: 'test3',

      component: test3

    },]

  }]

})

（2）NavMenuDemo.vue

（3）test1.vue

（4）test2.vue

最简单的导航栏配置如上图所示，项目中的文件结构如下所示