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

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

const originalPush = Router.prototype.push

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

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

err

})

}

export default router

3、导航守卫、路由元信息

（1）简介

导航守卫适用于 路由变化时。即当路由变化时，会触发导航守卫。

路由元信息 可以用于定义路由独有的信息（meta）。

注： 同一个组件切换时，参数改变不会触发导航守卫（复用组件）。可以通过 watch 监听 $route 对象的变化来定义导航守卫，或者 直接使用 beforeRouteUpdate 来进行导航守卫（组件内守卫）。

（2）全局前置守卫（beforeEach）

使用 beforeEach 可以定义一个全局前置守卫，路由跳转前会触发。

其有三个参数：

to：一个路由对象，表示即将进入的 目标路由对象。

from：一个路由对象，表示当前路由 离开时的路由对象。

next：一个方法（不能少，确保路由能够跳转出去。

next() 表示执行下一个守卫规则，若所有规则执行完毕，则结束并跳转到指定路由。

next({path: ‘’}) 或者 next({name: ‘’}) 表示指定路径跳转。

const router = new VueRouter({ … })

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

// …

})

（3）路由元信息

定义路由规则时，可以通过 meta 指定路由的元信息。

通过 router对象.meta 可以获取到某个 router对象 的 meta 信息，并根据其进行处理。

const router = new VueRouter({

routes: [

{

  path: '/foo',

  component: Foo,

  children: \[

    {

      path: 'bar',

      component: Bar,

      meta: { requiresAuth: true }

    }

  \]

}

]

})

（4）项目中使用

进入主页面后，当 token 过期或不存在时，需要跳转到登录页面重新登录。

使用 导航守卫，每次路由跳转前，确定 token 是否存在。可以使用 beforeEach 定义全局守卫，也可以使用 beforeEnter 为某个路由定义独有守卫。

此处演示使用 beforeEach 定义全局守卫。

Step1：

修改 Login.vue 登录逻辑，保存 token 值。

之前将 cookie 相关的操作保存在 /utils/auth.js 中，需要引入该 js。

CMS后台管理系统

<el-form :rules=“rules” size=“medium” :model=“loginForm” ref=“loginForm” class=“login-form” @keyup.enter.native=“submitForm”>

<el-button size=“medium” style=“width: 100%” type=“primary” @click=“submitForm”>立即登录

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) => {

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

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

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。