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