其中的Admin，Client，Public分别为各部分的路由，以子路由的形式一级级组织。如下所示：
export default { path: "/client", component: Client, beforeEnter: (to, from, next) => { if (getClientUserInfo() == null) { next({ path: '/public/client_login', replace: true, }) } else { next(); } }, children: [{ //学生端主页 path: '', name: "ClientMain", component: ClientHome }, { //学生个人资料页面 path: 'person/student_info', name: "StudentInfo", component: StudentInfo }, { //公告页面 path: 'course/:c_id/announcement', name: 'Main', component: Announcement }, { //课程基本信息 path: 'course/:c_id/base', component: ClientMain, children: [{ path: 'course_intro', name: "ClientCourseIntro", component: CourseIntro }, { path: 'exam_type', name: "ClientExamType", component: ExamType } ......其中的beforEnter为钩子函数，每次进入路由时执行该函数，用于判断用户是否登录。这里涉及到了一个前端鉴权的概念，由于前后端分离了，前端也必须做鉴权以免用户进入到了无权限的页面，这里我只是简单的做了登录判断，更详细的url鉴权也可实现，只需在对应的钩子函数中进行鉴权操作，更多关于钩子函数信息点击这里。
b、请求封装前端还有一个比较重要的部分是ajax请求的处理，请求处理还保护错误处理，有些错误只需要统一处理，而有些又需要独立的处理，这样一来就需要根据业务需求进行一下请求封装了，对结果进行处理后再返回给调用者。我的实现思路是发起请求，收到响应后先对错误进行一个同意弹窗提示，然后再将错误继续向后传递，调用者可选择性的捕获错误进行针对性处理，主要代码如下：
request = (url, method, params, form, isFormData, type) => { let token; if (type == 'admin') token = getToken(); else token = getClientToken(); let headers = { 'Authorization': token }; if (isFormData) { headers['Content-Type'] = "multipart/form-data"; } return new Promise((resolve, reject) => { axios({ url, method, params, data: form, headers, // timeout:2000 }).then(res => { resolve(res.data); //检查是否有更新token // console.log(res); if (res.headers['new-token'] != undefined) { console.log('set new token'); if (vm.$route.path.startsWith('/admin')){ localStorage.setItem("token",res.headers['new-token']); window.token = undefined; }else if(vm.$route.path.startsWith('/client')){ localStorage.setItem("clientToken",res.headers['new-token']); window.clientToken = undefined; } } }).catch(err => { reject(err); if (err.code == 'ECONNABORTED') { alertNotify("错误", "请求超时", "error"); return; } if (err.message == 'Network Error') { alertNotify("错误", "无法连接服务器", 'error'); return; } if (err.response != undefined) { switch (err.response.status) { case 401: if (window.isGoToLogin) { return; } //使用该变量表示是否已经弹窗提示了，避免大量未登录弹窗堆积。 window.isGoToLogin = true; vm.$alert(err.response.data, "警告", { type: "warning", showClose: false }).then(res => { window.isGoToLogin = false; if (vm.$route.path.startsWith('/admin/')) { clearInfo(); vm.$router.replace("/public/admin_login"); } else { clearClientInfo(); vm.$router.replace("/public/client_login"); } }); break; case 403: alertNotify("Error:403", '拒绝执行：' + err.response.data, "error"); break; case 404: alertNotify("Error:404", "找不到资源：" + url.substr(0, url.indexOf('?')), 'error'); break; case 400: alertNotify("Error:400", "请求参数错误：" + err.response.data, 'error'); break; case 500: alertNotify("Error:500", "服务器内部错误：" + err.response.data, 'error'); default: console.log('存在错误未处理：' + err); } } else { console.log(err); } }) }) }到这里就算是简单介绍完了,,想要更加深入了解的可以去github查看源代码，地址如下：https://github.com/FleyX/teach_system，记得star哦！