vue2和vue3 的项目中使用路由的差别、组件库、axios 拦截器、proxy 跨域代理、用户列表案例

在 vue2 的项目中使用路由

在 vue2 的项目中，只能安装并使用 3.x 版本的 vue-router。
版本 3 和版本 4 的路由最主要的区别：创建路由模块的方式不同！
vue-router 3.x 的官方文档地址：https://router.vuejs.org/zh/
vue-router 4.x 的官方文档地址：https://next.router.vuejs.org/

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换

3.x 版本的路由如何创建路由模块

步骤1：在 vue2 的项目中安装 3.x 版本的路由：

步骤2：在 src -> components 目录下，创建需要使用路由切换的组件：

步骤3：在 src 目录下创建 router -> index.js 路由模块：

步骤4：在 main.js 中导入路由模块，并通过 router 属性进行挂载

步骤5：在 App.vue 根组件中，使用 <router-view> 声明路由的占位符：

4.x 版本的路由如何创建路由模块

1.vue-router 4.x 的基本使用步骤

① 在项目中安装 vue-router

② 定义路由组件
③ 声明路由链接和占位符

可以使用 <router-link> 标签来声明路由链接，并使用 <router-view> 标签来声明路由占位符。示例代码如下：

④ 创建路由模块

在项目中创建 router.js 路由模块，在其中按照如下 4 个步骤创建并得到路由的实例对象：
① 从 vue-router 中按需导入两个方法

② 导入需要使用路由控制的组件
③ 创建路由实例对象

④ 向外共享路由实例对象

⑤ 在 main.js 中导入并挂载路由模块

2.vue-router 的高级用法

1. 路由重定向
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：
routes:[
{ path: '/' ,redirect: '/新地址'}
]
2. 自定义路由高亮的 class 类
在创建路由的实例对象时，开发者可以基于 linkActiveClass 属性，自定义路由链接被激活时所应用的类名：
默认高亮直接选择类名修改

3. 嵌套路由

① 声明子路由链接和子路由占位符
② 在父路由规则中，通过 children 属性嵌套声明子路由规则

---

新增命名路由

通过 name 属性为路由规则定义名称的方式，叫做命名路由。示例代码如下：

使用命名路由实现声明式导航

为 <router-link> 标签动态绑定 to 属性的值，并通过 name 属性指定要跳转到的路由规则。期间还可以用params 属性指定跳转期间要携带的路由参数。示例代码 如下：

使用命名路由实现编程式导航

调用 push 函数期间指定一个配置对象，name 是要跳转到的路由规则、params 是携带的路由参数：

导航守卫

导航守卫可以控制路由的访问权限。示意图如下：

如何声明全局导航守卫

全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制。可以按照如下的方式定义全局导航守卫：

创建路由实例对象与 2.x 不同

守卫方法的 3 个形参

全局导航守卫的守卫方法中接收 3 个形参，格式为：

注意：
① 在守卫方法中如果不声明 next 形参，则默认允许用户访问每一个路由！
② 在守卫方法中如果声明了 next 形参，则必须调用 next() 函数，否则不允许用户访问任何一个路由！

结合 token 控制后台主页的访问权限

组件库

1. 什么是 vue 组件库

在实际开发中，前端开发者可以把自己封装的 .vue 组件整理、打包、并发布为 npm 的包，从而供其他人下载和使用。这种可以直接下载并在项目中使用的现成组件，就叫做 vue 组件库。

2. vue 组件库和 bootstrap 的区别

二者之间存在本质的区别：
⚫ bootstrap 只提供了纯粹的原材料（ css 样式、HTML 结构以及 JS 特效），需要由开发者做进一步的组装和改造
⚫ vue 组件库是遵循 vue 语法、高度定制的现成组件，开箱即用

3. 最常用的 vue 组件库

① PC 端
⚫ Element UI（https://element.eleme.cn/#/zh-CN）
⚫ View UI（http://v1.iviewui.com/）
② 移动端
⚫ Mint UI（http://mint-ui.github.io/#!/zh-cn）
⚫ Vant（https://vant-contrib.gitee.io/vant/#/zh-CN/）

4. Element UI

Element UI 是饿了么前端团队开源的一套 PC 端 vue 组件库。支持在 vue2 和 vue3 的项目中使用：
⚫ vue2 的项目使用旧版的 Element UI（https://element.eleme.cn/#/zh-CN）
⚫ vue3 的项目使用新版的 Element Plus（https://element-plus.gitee.io/#/zh-CN）

4.2 在 vue2 的项目中安装 element-ui

4.2 引入 element-ui

开发者可以一次性完整引入所有的 element-ui 组件，或是根据需求，只按需引入用到的 element-ui 组件：
⚫ 完整引入：操作简单，但是会额外引入一些用不到的组件，导致项目体积过大
⚫ 按需引入：操作相对复杂一些，但是只会引入用到的组件，能起到优化项目体积的目的

4.3 完整引入

在 main.js 中写入以下内容

4.4 按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
步骤1，安装 babel-plugin-component：

步骤2，修改根目录下的 babel.config.js 配置文件，新增 plugins 节点如下：

步骤3，如果你只希望引入部分组件，比如 Button，那么需要在 main.js 中写入以下内容：

4.5 把组件的导入和注册封装为独立的模块

在 src 目录下新建 element-ui/index.js 模块，并声明如下的代码

axios 拦截器

1. 回顾：在 vue3 的项目中全局配置 axios

2. 在 vue2 的项目中全局配置 axios

需要在 main.js 入口文件中，通过 Vue 构造函数的 prototype 原型对象全局配置 axios：

3. 什么是拦截器

拦截器（英文：Interceptors）会在每次发起 ajax 请求和得到响应的时候自动被触发。

4. 配置请求拦截器

通过 axios.interceptors.request.use(成功的回调, 失败的回调) 可以配置请求拦截器。示例代码如下：

4.1 请求拦截器 – Token 认证

4.2 请求拦截器 – 展示 Loading 效果

借助于 element ui 提供的 Loading 效果组件（https://element.eleme.cn/#/zh-CN/component/loading）
可以方便的实现 Loading 效果的展示：

5. 配置响应拦截器

通过 axios.interceptors.response.use(成功的回调, 失败的回调) 可以配置响应拦截器。示例代码如下：

5.1 响应拦截器 – 关闭 Loading 效果

调用 Loading 实例提供的 close() 方法即可关闭 Loading 效果，示例代码如下：

proxy 跨域代理

1. 回顾：接口的跨域问题

vue 项目运行的地址：http://localhost:8080/
API 接口运行的地址：https://www.escook.cn/api/users
由于当前的 API 接口没有开启 CORS 跨域资源共享，因此默认情况下，上面的接口无法请求成功！

2. 通过代理解决接口的跨域问题

通过 vue-cli 创建的项目在遇到接口跨域问题时，可以通过代理的方式来解决：

3. 在项目中配置 proxy 代理

步骤1，在 main.js 入口文件中，把 axios 的请求根路径改造为当前 web 项目的根路径：

步骤2，在项目根目录下创建 vue.config.js 的配置文件，并声明如下的配置：

用户列表案例

总结