Day 2

1 编程式路由跳转到当前路由（参数不变），多次执行会抛出 NavigationDuplicated的警告错误？

-- 路由跳转有两种形式：声明式导航、编程式导航

-- 声明式导航没有这类问题，因为 vue-router底层已经处理好了

（1）为什么编程式导航进行路由跳转的时候，就有这种警告错误呢？

“vue-router”：“^3.5.3”: 最新的 vue-router 引入 promise 

（2）通过给 push 方法传递相应的成功、失败的回调函数，可以捕获到当前错误，可以解决。

（3）通过底部的代码，可以实现解决错误，这种写法在 push | replace 中依然还是会出现

（4）this：当前组件实例（search） ， this.$router 属性：当前的这个属性，属性值 VueRouter 类的一个实例，但在入口文件注册路由的时候，给组件实例添加 $router | $route 属性 ， push: VueRouter 类的一个实例

index.js

// 先把 VueRouter原型对象的puss ， 先保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;

// 重写push | replace
// 第一个参数：告诉原来 push 方法，你往哪里跳转（传递哪些参数）
// 第二个参数：成功的回调
// 第三个参数：失败的回调
VueRouter.prototype.push = function (location, resolve, reject) {
if (resolve && reject) {
// call || apply 区别
// 相同点，都可以调用函数一次，都可以篡改函数的上下文一次
// 不同点：call 与 apply 传递参数： call 传递参数用逗号隔开， apply 方法执行，传递数组
originPush.call(this, location, resolve, reject);
} else {
originPush.call(this, location, () => {}, () => {});
}
}

VueRouter.prototype.replace = function (location, resolve, reject) {
if (resolve && reject) {
originReplace.call(this, location, resolve, reject);
} else {
originReplace.call(this, location, () => {}, () => {});
}
}

2 Home 模块组件拆分

-- 先把静态页面完成

-- 拆分出静态组件

-- 获取服务器数据展示

-- 动态业务

3 三级联动组件完成

-- 由于三级联动，在 Home ，Search 、 Detail 、把三级联动注册为全局组件。

好处：只需要注册一次，就可以在项目任意地方使用

4 完成其余静态组件

HTML + CSS + 图片资源  -- 信息【结构、样式、图片资源】

5 Postman 测试接口

-- 刚刚经过 postman 工具测试，接口是没有问题的

-- 如果服务器返回的数据 code 字段 200，代表服务器返回数据成功

-- 整个项目，接口前缀都有 /api 字样

6 axios 二次封装

XMLHttpRequest、fetch、JQ、axios

（1）为什么需要进行二次封装 axios ？

请求拦截器、响应拦截器：请求拦截器，可以在发请求之前处理一些业务、相应拦截器、但服务器数据返回以后，可以处理一些事情。

安装 axios

npm install -- save axios

（2）在项目中经常API 文件夹【axios】

接口当中，路径都带有 /api

baseURL:"/api"

（3）其他方法可以参考axios相关文档

7 接口统一管理

项目很小：完全可以在组件的生命周期函数中发请求

项目大： axios.get('xxx')

（1）跨域问题

什么是跨域：协议、域名、端口号不同请求，称之为跨域

http://localhost:8080/#/home  -- 前端项目本地服务器

http://39.98.123.211       -- 后台服务器

JSONP 、 CROS 、代理

8 nprogress 进度条的使用

安装

npm install --save nprogress

start：进度条开始

done：进度条结束

进度条颜色可修改

9 vuex 状态管理库

（1）vuex 是什么？

vuex 是官方提供一个插件，状态管理库，集中式管理项目中组件共用的数据。

切记，并不是全部项目都需要 Vuex，如果项目很小，完全不需要Vuex，如果项目很大，组件很多，数据很多，数据维护很费劲，Vuex 仓库存储数据。

state 仓库存储数据的地方

mutations

actions

getters

modules

安装命令，版本过高不兼容

npm install --save vue@3.6.2

（2）Vuex基本使用

（3）Vuex 实现模块是开发

如果项目过大，组件过多，接口也很多，数据也很多，可以让Vuex进行模块式开发

模拟state 存储数据
{
    count:1,
    search:{a:1},
    detail:{sss},
    pay:{}
}