day-106-one-hundred-and-six-20230706-vue路由导航守卫相关-物美后台管理系统
vue路由导航守卫相关
常见面试题
- 面试题：介绍一下 vue-router 中的导航守卫函数
- 面试题：介绍一下你对vue-router的理解？
导航守卫函数
-
面试题：介绍一下 vue-router 中的导航守卫函数
-
在每一次路由切换的时候，首先把路由匹配、导航确认等事宜先处理好-在此期间会触发一系列的钩子函数，这些函数就是
路由导航守卫函数。然后再让组件销毁或者渲染-也就是再触发组件的相应钩子函数！ -
导航守卫函数分为三类：全局守卫、路由守卫、组件内守卫，每一次路由切换的时候，其执行的大概顺序：
-
触发失活组件的beforeRouteLeave。
-
触发全局前置守卫 beforeEach。
-
在匹配的路由表选项中，触发路由独享守卫 beforeEnter。
-
触发激活组件的 beforeRouteEnter。
-
触发全局解析守卫 beforeResolve。
-
触发全局后置守卫 afterEach。
- 此后再触发组件的相应钩子函数：先触发激活组件的beforeCreath/created/beforeMount，然后触发失活组件的beforeDestroy/destroyed，最后触发激活组件的mounted！
-
-
在每一个导航守卫函数中，都有三个参数：to目标路由的信息、from来源路由的信息、next执行下一步的方法（afterEach中没有next）；而且next函数必须执行，否则将无法进入下一步；也可以基于next跳转到指定的路由地址（例如：在之前做登录态校验的时候，如果没有登录，基于next直接让其进入登录页）！
-
而在我之前的项目开发中，常用的导航守卫函数就两个：
-
beforeEach 全局前置守卫。
- 在这里，我处理过
登录校验、权限校验、以及开启Loading等待效果等相关操作。
- 在这里，我处理过
-
afterEach 全局后置守卫。
- 在这里，我处理过
设置页面的title、关闭Loading效果等。
- 在这里，我处理过
-
-
而且之前项目中，在路由切换的时候，会基于
内置的<keep-alive>组件，对部分组件进行缓存！被<keep-alive>缓存的组件，其beforeDestroy/destroyed钩子函数，在路由切换的时候将不再触发-组件没有销毁，只是把相关信息缓存起来了，即便再切回到这个组件，也不会执行第一次渲染的相关逻辑了-只是把之前缓存的信息，拿出来渲染呈现即可！但是是否缓存组件，和导航守卫函数没有关系，只和组件是否应该被销毁有关系！-
被缓存的组件，在路由切换，其被失活的被激活的时候，会触发组件内的两个钩子函数。
- activated 被激活。
- deactivated 被失活。
-
-
在真实项目中，我们往往就是基于这一系列的钩子函数，去实现我们要做的需求！
-
导航守卫
导航守卫与原生钩子函数
keep-alive组件与导航守卫
keep-alive组件与组件生命周期函数
对vue-router的理解
-
面试题：介绍一下你对vue-router的理解？
-
之前我们公司做的所有项目，基本上都是SPA单页面应用的，所以vue-router每个项目中都有应用，它主要就是基于前端路由机制，来管理单页面应用！
-
在使用vue-router的时候，首先要指定路由的模式，例如：哈希路由和History路由，我们之前用的都是哈希路由！
-
然后真正写代码的时候，主页就是：
Vue.use(VueRouter)、new VueRouter()、以及把创建出来的router挂载到根组件的配置项中；我之前大概看过这部分源码，只有这几步操作完毕，每一个组件才会具备 r o u t e r / router/ router/route属性，才可以使用<RouterView>/<RouterLink>这两个全局组件。 -
当然这些东西都是基础语法，没有什么难度。比较消耗精力的，还是如何根据业务需求，进行路由的划分，比如：那些是一级，那些是二级/三级等！
-
路由层级不能太深。
-
页面视图中，有通用部分的为上级路由，变化较大的为下级路由。
- 我之前划分的时候，基本上都是本着：层级不宜过深、按照有通用部分等划分原则去处理的！
- 值得注意的是：在编写路由表的时候，一定要做路由懒加载！
-
-
剩下的基本上就是在组件中，基于
<router-link>或者编程式导航实现路由的跳转，以及跳转中基于各种手段进行传参，比如：问号传参、隐式传参、路径参数等！ -
而在真正的开发中，还会使用
路由的导航守卫函数（比如：beforeEach/afterEach）做一些处理；基于addRoute实现动态路由管理；基于<KeepAlive>对某些组件做缓存，防止路由切换时组件销毁等等！ -
总而言之，vue-router很也很重要，但是也不难；在vue-router@4版本后，其语法和vue-router@3版本，主要就是：
- 取消VueRouter类，基于createRouter来创建路由管理机制。
- 基于createWebHashHistory/createWebHistory函数来指定路由的模式。
- 组件中基于useRouter/useRoot等Hook函数来获取router和route对象。
- …
- 主要就是配合Vue3，全面使用函数式编程，其它的和之前版本使用起来差不多！
-
面试时
-
最好先写一剧本：
-
如个人信息介绍：写一遍，读几遍，背下来。对大概的问题也进行回答的准备。
-
到Vue：先说总结-引出vuex及vue-router等。
-
并准备对应的大概的vuex及vue-router步骤。
-
同时由vue-router也准备一些原理及细节：
- hash路由及history路由的原理。
- 同时由vue-router的初步配置及源码中关于
Vue.use(VueRouter)、new VueRouter()的理解。 - 路由统一管理–>路由表–>单个路由配置–>路由的懒加载。
- 路由跳转–>路由跳转的传参–>路由跳转的接收参数。
- 路由的导航守卫函数–>导航解析流程–>与原生组件的生命周期相关。
- 基于addRoute实现动态路由管理。
- 基于
<KeepAlive>对某些组件做缓存。 - 与vue对应的vue-router@4版本的差别。
-
-
物美后台管理系统
从零开始项目
-
从零开始，基于Vue2全家桶+ElementUI构建一个管理系统类项目。
-
可以基于开源的框架来处理：
- Antd Vue Pro。
- 若依。
- …
-
也可以自己来搭建。
-
-
自己来搭建的步骤：
-
基于@vue/cli脚手架 创建工程化/组件化项目。
-
创建项目
-
修改默认的配置项-
vue.config.js、babel.config.js、package.json。- 基础配置 -
vue.config.js中publicPath、lintOnSave、transpileDependencies、productionSourceMap。 - devServer -
vue.config.js中devServer。 - 进阶配置 -
vue.config.js中chainWebpack。 - 浏览器兼容 -
package.json中"browserslist"、babel.config.js。PC端ToB管理系统，一般不需要处理兼容。
- 基础配置 -
-
组件库的按需导入 - 如果项目较大，需要用到的组件很多，则使用全量导入即可。
-
安装项目所需要的一些模块-在
package.json中的：-
vue全家桶：vue@2 + vuex@3 + vue-vue-router@3。
-
“axios” 发送ajax请求。也可以使用fetch。
-
工具类库：
- “blueimp-md5” 密码加密，很多，但这个星号比较多。
- “dayjs” 处理时间，类似的有：moment.js。
- “lodash” 工具函数库。在lodash中不具备的或者内部实现不是很好的，我们可以自己封装一些方法，放在
utils.js/tool.js/lib.js…中，是它的补充。
-
统计图表：
- “echarts” 百度图表。
- g2plot react中的图表的东西。
- d3js
- WebGL + three.js 3D可视化。
- …
-
UI组件库
- element-ui
- antd of vue@1
- iview
- …
-
“vuex-persist” vuex的持久化存储。
-
“xlsx” 处理Excel表格的上传、下载、解析等。
-
富文本编辑器插件：
-
Word/PDF 解析的插件。
-
开发依赖：--------------
- “babel-plugin-component” 组件库的按需导入，配合import。
- …
-
-
-
搭建项目通用的架子
-
api接口的统一管理。
- /src/api/http.js 对axios的二次配置，把请求中通用的部分进行提取封装。
- /src/api/index.js 统一管理所有发送请求的方法-按模块管理。
- /src/global.js或/src/main.js 把请求放到Vue原型对象上。
-
assets公共静态资源的准备。
-
components 把一些之前封装好的，本项目中需要使用的公共组件处理好。
- /src/components 放置自己封装的。
- /src/global.js或/src/main.js 把注册Vue全局组件上，UI框架的全局导入或按需导入。
-
配置vuex的基础骨架。
-
配置vue-router的基础骨架
-
规划出路由该如何划分
-
在views中把需要用到的组件，都先创建好。相关结构、样式、功能都先不写。
-
开始构建路由的骨架。
- /src/router/index.js
- /src/router/routes.js
- /src/router/childRoutes.js
-
在指定的位置放上
<router-view>
-
-
全局通用的样式 App.vue
- …
-
-
划分任务，开始逐页面/逐组件开发-最重要的事情：一定要具备组件抽离封装的能力和意识。
-
前后端联调-调用后台接口地址，实现数据通信。
-
自测-自己测试。
-
提测-交给测试人员处理。
- 先打包。
- 把打包的内容部署到测试服务器。
- 测试反馈问题，开发解决问题，继续提测。
- …
-
上线
- 先打包
- 部署到正式的服务器
- 公测
-
后续需求就是第3、4、5、6、7步开始。
-
路由划分
主页的展开折叠
看项目
- 一般是先看路由表，及路由的一些渲染。
- 路由表中可以看到一级路由，看一些页面是否需要权限才能进入。
- 再看页面中的
<router-view>的位置。
验证码
- 扒接口，大概清楚那个字段是什么。一般一个是img的base64编码；一个uuid用于让后端判断验证是否正确；一个是code让前端判断请求是否正确可完成。
- 之后在需要用到验证码的接口时，把用户输入的验证码及uuid发送到服务器。
登录流程
-
具体步骤：
-
进行表单校验。用于忽略无效请求，以及SQL注入。
-
定义表单相关状态。
-
给表单元素v-model的值绑定相关状态。
-
把我们收集到的状态，通过model属性通知el-form表单最新的值。
-
通过prop属性给el-form-item设置状态名。
-
定义状态的规则。
-
通过rules属性通知el-form表单校验规则。
-
在某些时机时，触发校验。校验通过就可以进入下一步。
- 看最后一个视频。
-
-
处理接口要求的参数及参数格式。
-
把数据通过接口发送到服务器上。
-
-
说明：
-
在做任何的表单提交的时候「把用户输入的信息传递给服务器」，都需要做表单格式校验！！
- 防止无效的请求
- 防止SQL注入/XSS攻击
- …
-
表单校验：对用户输入的内容做格式校验。
-
自己手动做，主要思想：获取表单信息、基于正则做匹配校验。
-
只不过项目中，我们都会基于 组件库 自带的表单校验体系来处理。
-
UI组件库的校验体系步骤：
-
基于提供的组件搭建表单结构。
-
基于组件库内置的校验规则进行表单校验。
-
自带的规则，例如：验证非空、验证类型、验证长度…
-
用户自定义规则。
- 使用正则。
- 使用函数。
-
-
触发校验规则。
-
随时校验：onblur、onchange…
-
提交校验：
- 内置校验「按钮在form中，并且nativeType=submit」，成功/失败触发规定的某些方法。
- 手动校验：获取form的实例，基于实例提供的方法进行校验。
-
-
-
-
-
