20230706----重返学习-vue路由导航守卫相关-物美后台管理系统-Toy模板网

这篇具有很好参考价值的文章主要介绍了20230706----重返学习-vue路由导航守卫相关-物美后台管理系统。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

day-106-one-hundred-and-six-20230706-vue路由导航守卫相关-物美后台管理系统

vue路由导航守卫相关

常见面试题

面试题：介绍一下 vue-router 中的导航守卫函数
面试题：介绍一下你对vue-router的理解？

导航守卫函数

面试题：介绍一下 vue-router 中的导航守卫函数
- 在每一次路由切换的时候，首先把路由匹配、导航确认等事宜先处理好-在此期间会触发一系列的钩子函数，这些函数就是路由导航守卫函数。然后再让组件销毁或者渲染-也就是再触发组件的相应钩子函数！
- 导航守卫函数分为三类：全局守卫、路由守卫、组件内守卫，每一次路由切换的时候，其执行的大概顺序：
  1. 触发失活组件的beforeRouteLeave。
  2. 触发全局前置守卫 beforeEach。
  3. 在匹配的路由表选项中，触发路由独享守卫 beforeEnter。
  4. 触发激活组件的 beforeRouteEnter。
  5. 触发全局解析守卫 beforeResolve。
  6. 触发全局后置守卫 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挂载到根组件的配置项中；我之前大概看过这部分源码，只有这几步操作完毕，每一个组件才会具备 $ro u t er /$ route属性，才可以使用<RouterView>/<RouterLink>这两个全局组件。
- 当然这些东西都是基础语法，没有什么难度。比较消耗精力的，还是如何根据业务需求，进行路由的划分，比如：那些是一级，那些是二级/三级等！
  1. 路由层级不能太深。
  2. 页面视图中，有通用部分的为上级路由，变化较大的为下级路由。
  - 我之前划分的时候，基本上都是本着：层级不宜过深、按照有通用部分等划分原则去处理的！
  - 值得注意的是：在编写路由表的时候，一定要做路由懒加载！
- 剩下的基本上就是在组件中，基于<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。
  - 若依。
  - …
- 也可以自己来搭建。
自己来搭建的步骤：
1. 基于@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 解析的插件。
    - 开发依赖：--------------文章来源地址https://www.toymoban.com/news/detail-524247.html
      - “babel-plugin-component” 组件库的按需导入，配合import。
      - …
2. 搭建项目通用的架子
  1. api接口的统一管理。
    - /src/api/http.js 对axios的二次配置，把请求中通用的部分进行提取封装。
    - /src/api/index.js 统一管理所有发送请求的方法-按模块管理。
    - /src/global.js或/src/main.js 把请求放到Vue原型对象上。
  2. assets公共静态资源的准备。
  3. components 把一些之前封装好的，本项目中需要使用的公共组件处理好。
    - /src/components 放置自己封装的。
    - /src/global.js或/src/main.js 把注册Vue全局组件上，UI框架的全局导入或按需导入。
  4. 配置vuex的基础骨架。
  5. 配置vue-router的基础骨架
    - 规划出路由该如何划分
    - 在views中把需要用到的组件，都先创建好。相关结构、样式、功能都先不写。
    - 开始构建路由的骨架。
      - /src/router/index.js
      - /src/router/routes.js
      - /src/router/childRoutes.js
    - 在指定的位置放上<router-view>
  6. 全局通用的样式 App.vue
    - …
3. 划分任务，开始逐页面/逐组件开发-最重要的事情：一定要具备组件抽离封装的能力和意识。
4. 前后端联调-调用后台接口地址，实现数据通信。
5. 自测-自己测试。
6. 提测-交给测试人员处理。
  - 先打包。
  - 把打包的内容部署到测试服务器。
  - 测试反馈问题，开发解决问题，继续提测。
  - …
7. 上线
  - 先打包
  - 部署到正式的服务器
  - 公测
8. 后续需求就是第3、4、5、6、7步开始。

路由划分

主页的展开折叠

看项目

一般是先看路由表，及路由的一些渲染。
路由表中可以看到一级路由，看一些页面是否需要权限才能进入。
再看页面中的<router-view>的位置。

验证码

扒接口，大概清楚那个字段是什么。一般一个是img的base64编码；一个uuid用于让后端判断验证是否正确；一个是code让前端判断请求是否正确可完成。
之后在需要用到验证码的接口时，把用户输入的验证码及uuid发送到服务器。

登录流程

具体步骤：
1. 进行表单校验。用于忽略无效请求，以及SQL注入。
  1. 定义表单相关状态。
  2. 给表单元素v-model的值绑定相关状态。
  3. 把我们收集到的状态，通过model属性通知el-form表单最新的值。
  4. 通过prop属性给el-form-item设置状态名。
  5. 定义状态的规则。
  6. 通过rules属性通知el-form表单校验规则。
  7. 在某些时机时，触发校验。校验通过就可以进入下一步。
  - 看最后一个视频。
2. 处理接口要求的参数及参数格式。
3. 把数据通过接口发送到服务器上。
说明：
- 在做任何的表单提交的时候「把用户输入的信息传递给服务器」，都需要做表单格式校验！！
  - 防止无效的请求
  - 防止SQL注入/XSS攻击
  - …
- 表单校验：对用户输入的内容做格式校验。
  - 自己手动做，主要思想：获取表单信息、基于正则做匹配校验。
  - 只不过项目中，我们都会基于组件库自带的表单校验体系来处理。
    - UI组件库的校验体系步骤：
      1. 基于提供的组件搭建表单结构。
      2. 基于组件库内置的校验规则进行表单校验。
        
        自带的规则，例如：验证非空、验证类型、验证长度…
        
        用户自定义规则。
        
        使用正则。
        
        使用函数。
      3. 触发校验规则。
        
        随时校验：onblur、onchange…
        
        提交校验：
        
        内置校验「按钮在form中，并且nativeType=submit」，成功/失败触发规定的某些方法。
        
        手动校验：获取form的实例，基于实例提供的方法进行校验。