Vue + ElementUI 实现后台管理系统模板 -- 前端篇（八）：引入 vue-router 进行路由管理、模块化封装 axios 请求

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Step2：

修改路由。

定义路由元信息（meta）。meta 用于定义路由元信息，其中 isRouter 用于指示是否开启路由守卫（true 表示开启）。

const routes = [{

path: “/”,

name: “Home”,

component: Home,

children: [{

path: “/about”,

name: “About”,

meta: {

name: ‘关于我们’,

isRouter: true

},

component: () =>

import( /* webpackChunkName: “about” */ “./views/About.vue”)

},

{

path: ‘/demo/echart’,

name: ‘Echarts’,

component: () => import(‘@/views/echart/Echarts.vue’),

meta: {

isRouter: true

}

},

{

path: ‘/demo/ueditor’,

name: ‘Ueditor’,

component: () => import(‘@/views/ueditor/Ueditor.vue’),

meta: {

isRouter: true

}

}

]

},

{

path: “*”,

name: “404”,

component: () => import(“./views/404.vue”)

},

{

path: “/login”,

name: “Login”,

component: () => import(“./views/login.vue”)

}

]

Step3：

添加全局守卫（beforeEach）。

当 isRouter 为 true 时，才会去校验 token，token 校验失败则跳转到 Login 页面重新登录。

// 添加全局路由导航守卫

router.beforeEach((to, from, next) => {

// 当开启导航守卫时，验证 token 是否存在。

if (to.meta.isRouter) {

// 获取 token 值

let token = getToken()

console.log(token)

// token 不存在时，跳转到 登录页面

if (!token || !/\S/.test(token)) {

next({name: ‘Login’})

}

}

next()

})

Step4：

完整 router 如下：

import Vue from “vue”;

import Router from “vue-router”;

import Home from “./views/Home.vue”;

Vue.use(Router);

const routes = [{

path: “/”,

name: “Home”,

component: Home,

children: [{

path: “/about”,

name: “About”,

meta: {

name: ‘关于我们’,

isRouter: true

},

component: () =>

import( /* webpackChunkName: “about” */ “./views/About.vue”)

},

{

path: ‘/demo/echart’,

name: ‘Echarts’,

component: () => import(‘@/views/echart/Echarts.vue’),

meta: {

isRouter: true

}

},

{

path: ‘/demo/ueditor’,

name: ‘Ueditor’,

component: () => import(‘@/views/ueditor/Ueditor.vue’),

meta: {

isRouter: true

}

}

]

},

{

path: “*”,

name: “404”,

component: () => import(“./views/404.vue”)

},

{

path: “/login”,

name: “Login”,

component: () => import(“./views/login.vue”)

}

]

const router = new Router({

routes, // 用于定义 路由跳转 规则

mode: “history”, // mode 用于去除地址中的 #

base: process.env.BASE_URL,

scrollBehavior: () => ({ // scrollBehavior 用于定义路由切换时，页面滚动。

y: 0

})

});

// 添加全局路由导航守卫

router.beforeEach((to, from, next) => {

// 当开启导航守卫时，验证 token 是否存在。

if (to.meta.isRouter) {

// 获取 token 值

let token = getToken()

console.log(token)

// token 不存在时，跳转到 登录页面

if (!token || !/\S/.test(token)) {

next({name: ‘Login’})

}

}

next()

})

// 解决相同路径跳转报错

const originalPush = Router.prototype.push

Router.prototype.push = function push(location) {

return originalPush.call(this, location).catch(err => {

err

})

}

export default router

Step5：

测试一下。

手动模拟 token 失效。token 失效后，点击菜单栏，路由会跳转到 登录界面。

二、模块化封装 axios 请求

---

1、简介

前面封装了 axios，并在 main.js 中全局挂载，所以在组件中可以使用 $http 进行访问。

但是每次请求的相关处理都会写在各个组件中，代码看上去不太美观，且不易维护。

所以可以将请求根据功能、模块进行划分，并写在固定位置，在组件中引入这些模块即可。

2、代码实现

（1）按照功能将请求进行模块划分。

比如：登录、登出的请求为 login.js，用户信息相关的请求为 user.js，菜单相关的请求为 menu.js。

import request from ‘@/utils/request’

export function getToken(data) {

return request({

url: ‘/auth/token’,

method: ‘post’,

data

})

}

（2）定义一个 index.js，引入 login.js 模块。

import * as login from ‘./modules/login.js’

import * as user from ‘./modules/user.js’

export default {

login,

user

}

（3）在 main.js 中全局挂载。

import request from ‘@/api/index.js’

Vue.prototype.$request = request

（4）修改 Login.vue 的登录逻辑，通过全局挂载的 $request调用 login 模块的 getToken 方法。

submitForm() {

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】