vue-admin-template导航栏路由功能

前面登录功能已经实现了https://blog.csdn.net/qq_41950447/article/details/115870228，后端接口已经设置好了，跨域问题已经解决，下面写路由

 点击相应的导航栏展示设置的内容

1.添加路由

首先在router->index.js中路由根据已有的例子进行改写

 //添加讲师列表路由实现
  {
    path: '/teacher',
    component: Layout,
    redirect: '/teacher/table',//点击teacher默认重定向到table中
    name: '讲师管理',
    meta: { title: '讲师管理', icon: 'example' },
    children: [
      {
        path: 'table',
        name: '讲师列表',
        component: () => import('@/views/edu/teacher/list'),
        meta: { title: '讲师列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加讲师',
        component: () => import('@/views/edu/teacher/save'),
        meta: { title: '添加讲师', icon: 'tree' }
      }
    ]
  },

效果如下，替换相应的位置

 

2.点击某个路由，显示路由对应的页面内容

根据目录结构可知，views是存放vue页面的，所以在里面创建教师列表和教师添加两个vue页面

 

此格式是固定格式template和div

写完两个页面后，在将之前写的路由中component: () => import('@/views/tree/index')，@/views/tree/index.vue根据这个路径在相应的对应的文件中写对应的vue页面，如上面代码中

初始代码改为component: () => import('@/views/edu/teacher/list'),与component: () => import('@/views/edu/teacher/save'),这样点击导航栏就可以显示页面了

至此添加路由已经完成，还有以下内容等实现教师列表在具体写！

4.在创建的vue页面中引入第三步的js文件调用方法实现功能
    import { getList } from '@/api/table'
    data：{}
    created：{}
    medthods：{}
5.最后使用element-ui显示数据。