vue-admin-template导航栏路由功能
点击相应的导航栏展⽰设置的内容
1.添加路由
⾸先在router->index.js中路由根据已有的例⼦进⾏改写
//添加讲师列表路由实现
{
path: '/teacher',
component: Layout,
redirect: '/teacher/table',//点击teacher默认重定向到table中
name: '讲师管理',
meta: { title: '讲师管理', icon: 'example' },
children: [
{
path: 'table',
vue element admin
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 class="app-container">
讲师列表
</div>
</template>
<template>
<div class="app-container">
讲师添加
</div>
</template>
此格式是固定格式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显⽰数据。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。