在一个后台管理的项目中，关于路由的配置，
我们需要实现的一个布局是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文件中
