文章目录
1. 重写 push 和 replace 方法
- 编程式路由跳转到当前路由（参数不变），多次执行会抛出NavigationDuplicated的警告错误。
答：路由跳转有两种形式，声明式导航、编程式导航
- 为什么编程式导航进行路由跳转的时候，就会有这种警告错
答：vue-router 引入了 promise
- 通过下面的代码，可以解决错误（但治标不治本，在别的组件当中push | replace，编程式导航还是有类似的错误）
this.$router.push({
name:'search', params:{
keyword:this.keyword},query:{
k:this.keyword.toUpperCase()}}, ()=>{
},()=>{
})
- 在 ./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 模块组件拆分
- 先把静态页面完成
- 拆分出静态组件
- 获取服务器的数据进行展示
- 动态业务
3. 三级联动组件完成
- 由于三级联动，在Home、Search、Detail，把三级联动注册为全局组件。
- 好处：只需要注册一次，就可以在项目任意地方使用。
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. 接口统一管理
- 项目小：完全可以在组件的生命周期函数中发请求
- 项目大：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
- start：进度条开始
- done：进度条结束
- 进度条的颜色可以修改，在 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: []}
]
}
]
不积跬步无以至千里 不积小流无以成江海
点个关注不迷路（持续更新中…）