vue-route(三)后台管理路由配置
在一个后台管理的项目中,关于路由的配置,
我们需要实现的一个布局是header,aside,main三部分,后期还可能添加footer部分,实现的需求是请求数据时,局部的刷新,这个时候我们就需要对路由进行配置。要实现main部分的局部刷新,还要考虑404页面
直接上代码
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); const _import_ = file = > () = > import('../pages/' + file + '.vue'); const asyncRouterMap = []; const constantRouterMap = [ { path: '/login', name: 'Login', component: _import_('Login/index'), meta: { title: "登 录", auth: false }, }, { path: '/', name: 'Home', component: _import_('Home'), redirect: { name: 'Index' }, children: [ { path: 'index', name: 'Index', component: _import_('Index/index'), meta: { title: "工作台", auth: true, crumbs: [{ name: '概况' }, { name: '工作台' }] } }, { path: 'register', name: 'Register', component: _import_('Register/index'), meta: { title: "挂号记录", auth: true, crumbs: [{ name: '就诊管理' }, { name: '挂号记录' }] } }, { path: 'register/refundmoney', name: 'RefundMoney', component: _import_('Register/RefundMoney/index'), meta: { title: "挂号详情", auth: true, crumbs: [{ name: '就诊管理' }, { name: '挂号记录' }] }, }, { path: 'doctor', name: 'doctor', component: _import_('Doctor/index'), meta: { title: "医生列表", auth: true, crumbs: [{ name: '医生管理' }, { name: '医生管理' }] }, }, { path: 'doctor/supervise', name: 'DoctorSupervise', component: _import_('Doctor/supervise/index'), meta: { title: "医生信息", auth: true, crumbs: [{ name: '医生管理' }, { name: '医生管理' }] }, }, { path: 'doctor/editdoctor', name: 'EditDoctor', component: _import_('Doctor/edidoctor/editdoctor'), meta: { title: "编辑医生信息", auth: true, crumbs: [{ name: '医生管理' }, { name: '医生管理' }] }, }, { path: 'doctor/scheduling', name: 'doctorScheduling', component: _import_('Doctor/scheduling/index'), meta: { title: "修改医生排班", auth: true, crumbs: [{ name: '医生管理' }, { name: '排班管理' }] }, }, { path: 'depart', name: 'depart', component: _import_('Department/index'), meta: { title: "科室管理列表", auth: true, crumbs: [{ name: '医院管理' }, { name: '科室管理' }] }, }, { path: 'depart/edit', name: 'DepartEdit', component: _import_('Department/Edit/index'), meta: { title: "编辑科室信息", auth: true, crumbs: [{ name: '医院管理' }, { name: '科室管理' }] }, }, { path: 'patient', name: 'Patient', component: _import_('Patient/index'), meta: { title: "就诊人管理", auth: true, crumbs: [{ name: '就诊人管理' }, { name: '就诊人管理' }] }, }, { path: 'patient/info', name: 'Info', component: _import_('Patient/Info/index'), meta: { title: "就诊人信息", auth: true, crumbs: [{ name: '就诊人管理' }, { name: '就诊人管理' }] }, }, { path: 'scheduling', name: 'Scheduling', component: _import_('Scheduling/index'), meta: { title: "排班列表", auth: true, crumbs: [{ name: '医生管理' }, { name: '排班管理' }] }, }, { path: 'scheduling/edit', name: 'SchedulingEdit', component: _import_('Scheduling/Edit/index'), meta: { title: "排班编辑", auth: true, crumbs: [{ name: '医生管理' }, { name: '排班管理' }] }, }, { path: 'service', name: 'Service', component: _import_('Service/index'), meta: { title: "服务管理", auth: true, crumbs: [{ name: '医院管理' }, { name: '服务管理' }] }, }, { path: 'service/edit', name: 'ServiceEdit', component: _import_('Service/Edit/index'), meta: { title: "编辑服务", auth: true, crumbs: [{ name: '医院管理' }, { name: '服务管理' }] }, } ] }, { path: '/404', name: '404', component: _import_('Error/index'), meta: { title: "请求页面未找到", auth: false }, }, { path: '*', meta: { title: "请求页面未找到", auth: false }, redirect: '/404' } ]; const router = new Router({ mode: 'hash', base: process.env.BASE_URL, routes: constantRouterMap, linkActiveClass: "router-link-active", }); export default router
路由配置的顺序对路由的加载也是有很大的影响,我们后台管理系统,需要先进行登录处理,然后会默认访问首页,当然,我们也要考虑到404页面,404页面包括哪些呢?
我对404的理解就是在路由的映射列表中,没有找到对应的路由从而返回404;
这里,我们可以采用”*”通配符来进行匹配,当然顺序也是要注意的,login。首页 》children。 404。 “*”
当然我们还需要进行路由守卫的设置,我们可以单独的放在permission.js文件中
作者:狗尾草
-------------------------------------------
个性签名:海到无边天作岸,山登绝顶人为峰!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!