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文件中