Vue —— 项目实战总结（二）

---

1. 重写 push 和 replace 方法

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

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

2. 为什么编程式导航进行路由跳转的时候，就会有这种警告错

答：vue-router 引入了 promise

3. 通过下面的代码，可以解决错误（但治标不治本，在别的组件当中push | replace，编程式导航还是有类似的错误）

	this.$router.push({name:'search', params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}}, ()=>{},()=>{})

4. 在 ./router/index.js 中重写 push 和 replace 方法

	// 先把VueRouter原型对象的push备份
	const originalPush = VueRouter.prototype.push;
	// 第一个参数：告诉原来push方法，往哪里跳转（传递哪些参数）
	VueRouter.prototype.push = function push(location) {
	  // call：可以调用函数一次，可以篡改函数的上下文一次，传递的参数用逗号隔开
	  return originalPush.call(this, location).catch((err) => err);
	};
	
	// 先把VueRouter原型对象的replace备份
	const originalReplace = VueRouter.prototype.replace;
	// 第一个参数：告诉原来replace方法，往哪里跳转（传递哪些参数）
	VueRouter.prototype.replace = function replace(location) {
	  // call：可以调用函数一次，可以篡改函数的上下文一次，传递的参数用逗号隔开
	  return originalReplace.call(this, location).catch((err) => err);
	};

2. Home 模块组件拆分

1. 先把静态页面完成
2. 拆分出静态组件
3. 获取服务器的数据进行展示
4. 动态业务

3. 三级联动组件完成

1. 由于三级联动，在Home、Search、Detail，把三级联动注册为全局组件。
2. 好处：只需要注册一次，就可以在项目任意地方使用。

4. 完成其余的静态组件

HTML + CSS + 图片资源 —— 细心【结构、样式、图片资源】

5. POSTMAN 测试接口

使用 postman 进行接口测试

6. 为什么需要进行二次封装axios？

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

在 src 下创建 api 文件夹，该文件夹下创建 request.js 文件，进行对 axios 的二次封装。

request.js

	// 对axios进行二次封装
	import axios from 'axios'
	
	// 1.利用axios对象的方法create，去创建一个axios实例
	// 2.request就是axios
	const requests = axios.create({
	    // 配置对象，基础路径，发送请求的时候，路径当中会出现api
	    baseURL:'/api',
	    // 代表请求超时的时间为5s
	    timeout: 5000
	})
	// 请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做出一些事情
	requests.interceptors.request.use((config)=>{
	    // config:配置对象，对象里面有一个重要的属性：header请求头
	    return config
	})
	// 响应拦截器
	requests.interceptors.response.use((res)=>{
	    // 成功的回调函数：服务器相应数据回来以后，响应栏可以检测到，可以做些事情
	    return res.data
	},(error)=>{
	    // 响应失败的回调函数
	    return Promise.reject(new error('faile'))
	})
	
	// 对外暴露
	export default requests

7. 接口统一管理

1. 项目小：完全可以在组件的生命周期函数中发请求
2. 项目大：axios.get('xxx ')

.api/index.js

	// API接口进行统一管理
	import requests from "./request";
	
	// 三级联动的接口 get请求 无参数
	export const reqCategoryList = ()=>{
	    // 发请求: axios发送请求返回的结果是Promise对象
	    return requests({url:'/product/getBaseCategoryList',methods:'get'})
	}

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

解决跨域： JSONP、CROS、代理

vue.config.js 中代理跨域

	const { defineConfig } = require("@vue/cli-service");
	module.exports = defineConfig({
	  transpileDependencies: true,
	  // 代理跨域
	  devServer: {
	    proxy: {
	      "/api": {
	        target: "http://gmall-h5-api.atguigu.cn",
	        pathRewrite: { "^/api": "" },
	      },
	    },
	  },
	});

8. nprogress 进度条使用

	//安装进度条插件
	npm install --save nprogress

1. start：进度条开始
2. done：进度条结束
3. 进度条的颜色可以修改，在 nprogress.css 中

9. vuex 状态管理库

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

vuex实现模块式开发：项目过大、组件过多、接口很多、数据很多，可以使用Vuex 实现模块式开发

	// Vuex 相关配置
	import Vue from 'vue'
	import Vuex from 'vuex'
	// 使用Vuex插件
	Vue.use(Vuex)
	// 引入小仓库
	import home from './home'
	import search from './search'
	
	// 对外暴露Store类的一个实例
	export default new Vuex.Store({
	    // 实现Vuex仓库模块化开发存储数据
	    modules:{
	       home,
	       search 
	    }
	})

10. TypeNav 三级联动展示数据业务

	[
	  {
	    id: 1,
	    name: '电子书',
	    child: [
		  {id: 2, name: '活着', child: []}
		]	
	  }
	]

不积跬步无以至千里 不积小流无以成江海

点个关注不迷路（持续更新中…）