VUE3开发踩坑记录

监听属性

const watchName = watch(()=>attributeName,(newV,oldV)=>{},{有关参数})

路由参数

const route = useRoute();
//路由参数
route.params
//查询参数
route.query

监听路由参数

在监听的最外层加一个判断（是否存在所需参数），以防止进入其他页面后报错
建议对newVal和oldVal都判断一下，以免在进入或离开页面时产生报错

前端请求参数body和params

axios.post请求 body和params在Content-Type类型不同时的区别也不同

• Content-Type为application/x-www-form-urlencoded时，params里的参数会被以&的方式拼接在请求地址后面，body里的参数则会以FormData的形式存在，但body不会被解析，而是整体被作为一个key值，没有value

解决办法是导入qs库（axios包中），body中的参数使用qs.stringify()方法处理后才能被后端正确获取

• Content Type为application/json时，params参数的处理方式不变，body中的参数则会放到Request Payload当中

完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫(2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

遇到npm包下载相关的问题，清理缓存并重新配置镜像源大概率能解决