这个是因为飞书文档无法满足笔记需求，想到写博客记录笔记，前面的笔记看情况决定是不是补上
部分内容参考博主毛毛虫呜呜的笔记
路由传参二次封装axiosloadsh插件防抖和节流编程式导航
路由传参路由跳转方式：
声明式导航：router-link，必须要加to：
编程式导航：利用组件实例对象的$router.push/replace方法，跳转之前可以书写一下自己的 业务。
query、params两个属性可以传递参数：
query参数：不属于路径当中的一部分，类似于get请求，地址栏表现为 /search?k1=v1&k2=v2
query参数对应的路由信息 path: "/search"
params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位 ,地址栏表现为 /search/v1/v2
params参数对应的路由信息要修改为path: "/search/:keyword"这里的/:keyword就是一个params参数的占位符
路由传参：
1、字符串形式
this.$router.push("/search/" + this.keyWord + "?k=" + this.keyWord.toUpperCase());
2、模板字符串
this.$router.push(`/search/${this.keyWord}?k=${this.keyWord.toUpperCase()}`)
3、对象写法
this.$router.push({name: "search", params: {keyWord: this.keyWord}, query: {k: this.keyWord.toUpperCase()}})
路由常问问题
Q：路由传递参数（对象写法）path是否可以结合params参数一起使用？
A：不可以，路由跳转传参的时候，对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数一起使用
Q：如何指定params可传可不传？
A： 1. 在配置路由的时候，在配置后面加一个问号 path: "/search/:keyWord?"
Q：params参数可以传递也可不传递，但是如果传递空串，如何解决？
A： 使用undefined解决
二次封装axiosQ：路由组件能不能传递props数据？
A： 可以，三种写法：
1. 布尔值写法：props: true
2. 对象写法：props: {a:1, b:1}
3. 函数写法：props:($router)=>{ return {keyword:$router.params.keyword, k:$router.query.k} }
axios中文文档地址
Axios 是一个基于 promise 的 HTTP 库，vue比较适合Axios。
请求拦截器：可以在发送请求之前处理一些业务。
响应拦截器：可以在数据返回后处理一些事情。
// 对axios进行二次封装
import axios from "axios";
import nprogress from "nprogress";
import "nprogress/nprogress.css"
//1、利用axios对象的方法create去创建一个axios实例
const requests = axios.create({
//配置对象
// 基础路径，发请求的时候，路径中会出现/api
baseURL: "/api",
// 设置超时
timeout: 5000,
});
// 请求拦截器：在发送请求之前，请求拦截器可以检测到，可以在发出请求之前处理一些业务
requests.interceptors.request.use((config) => {
//config：配置对象，主要是对请求头headers配置
//比如添加token
// 进度条开始
nprogress.start();
return config;
})
// 响应拦截器
requests.interceptors.response.use((res) => {
// 进度条结束
nprogress.done();
// 成功回调函数
return res.data;
}, (error) => {
//响应失败的回调函数
return Promise.reject(new Error(error));
})
export default requests;
loadsh插件防抖和节流
在快速划过三级导航或者搜索框输入搜索文字的时候，如果事件处理函数调用的频率无限制，会造成浏览器卡顿。因此会采用节流（throttle）和防抖（debounce）。
节流：在规定的时间间隔范围内不会重复触发函数的回调，只有大于这个时间间隔才会触发回调，把频繁变为少量触发
防抖：前面的所有触发都被取消，最后一次执行在规定时间之后才会触发，也就是说如果连续快速触发，只会执行一次
该项目采用第三方库实现节流：
// 按需引入throttle
import { throttle } from 'lodash/throttle.js'
methods: {
//采用键值对形式创建函数
changeIndex: throttle(function (index){
this.currentIndex = index
},100),
}
编程式导航
需要实现的部分的截图：（功能：点击菜单跳转链接，url带上参数）
实现路由跳转有两种方式：
声明式导航：router-link
编程式导航：push|replace
对于导航式路由，我们有多少个a标签就会循环出多少个router-link标签，这样当我们频繁操作时浏览器会出现卡顿现象。
对于编程式路由，我们是通过触发点击事件实现路由跳转。同理有多少个a标签就会有多少个触发函数。虽然不会出现卡顿，但是也会影响性能。
最好的解决方案就是：编程时导航+事件委派。事件委派就是把子节点的触发时间都委派给父节点，这样就可以只调用一次回调函数goSearch
利用事件委派也存在一些问题：
（1）把全部的子节点【h3、dt、dl、em】的事件都委派给了父亲节点，如何确定点击的一定是a标签？
（2）如何确定区分是一级还是二、三级的标签（一、二、三级分类产品的名字、id需要在url中传递）
解决方案：
（1）给三个a标签添加自定义属性:data-categoryName，只有这三个a标签拥有，其他子节点没有.
（2）添加自定义属性:data-category1Id、:data-category2Id、:data-category3Id来获取三个不同级别的a标签内的id来实现跳转。
（*）可以使用event来获取当前点击事件，通过event.target属性获取当前点击节点，再通过dataset属性获取节点的属性信息。
节点中有一个属性dataset属性可以获取当前节点的自定义属性与属性值
goSearch函数代码：
goSearch(event) {
let element = event.target;
//节点中有一个属性dataset（火狐、谷歌支持），可以获取节点的自定义属性与属性值
let {categoryname,category1id,category2id,category3id} = element.dataset;
if (categoryname) {
// 整理路由跳转的参数
let location = {name:'search'};
let query = {categoryName:categoryname};
// 一、二、三级
if (category1id) {
query.category1Id = category1id;
} else if (category2id){
query.category2Id = category2id;
} else {
query.category3Id = category3id;
}
// 完整参数
location.query = query;
// 路由跳转
this.$router.push(location);
}
},
},
