在一個後臺管理的專案中，關於路由的配置，
我們需要實現的一個佈局是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檔案中