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

Dear 丶 2021-09-25 07:32 539阅读 0赞

> 前面登录功能已经实现了[https://blog.csdn.net/qq\_41950447/article/details/115870228][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' }
          }
        ]
      },

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTUwNDQ3_size_16_color_FFFFFF_t_70][]

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

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

![20210419184534184.png][]

此格式是固定格式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显示数据。

[https_blog.csdn.net_qq_41950447_article_details_115870228]: https://blog.csdn.net/qq_41950447/article/details/115870228
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTUwNDQ3_size_16_color_FFFFFF_t_70]: /images/20210923/264f26bb9c4c4f90b2cb336c0d989961.png
[20210419184534184.png]: /images/20210923/55055df23a65400eb8fa8eb0491c8577.png