目录vue的学习笔记使用emit的步骤使用vue-Router的坑点报错信息报错原因总结错误代码正确代码一句话最终结论箭头函数速记口诀涓滴之水终可磨损大石不是由于它力量强大而是由于昼夜不舍的滴坠。 —贝多芬vue的学习笔记使用emit的步骤在子组件定义事件名称const emit defineEmits([updateUser])子组件触发事件并发射数据emit(updateUser, {} )在父组件接受发射数据router-view updateUserupdateUser/router-view父组件更新页面的数据constupdate(){userJSON.parse(localStorage.getItem(canteen-user)||{})}使用vue-Router的坑点报错信息TypeError: Cannot use in operator to search for catch in undefined at extractComponentsGuards (vue-router.js)报错原因总结本次错误的直接原因是在定义路由的懒加载组件时使用了带花括号{}但没有return的箭头函数导致组件返回值为undefined。错误代码错误的路由配置写法// 箭头函数加了 {} 却没写 return{path:user,name:User,component:(){import(/views/manager/User.vue)}}上述写法等价于component:(){import(/views/manager/User.vue)returnundefined}Vue Router 拿到undefined后崩溃所以才报错了。正确代码{path:user,name:User,component:()import(/views/manager/User.vue)}不加花括号 自动 return 正确 ✅一句话最终结论Vue Router 懒加载必须使用component: () import(xxx.vue)一旦写成() { import(...) }且没有return就会导致组件为undefined从而触发该错误。箭头函数速记口诀写法是否有 return结果() import(...)✅ 自动 return✅ 正确() { return import(...) }✅ 手写 return✅ 正确() { import(...) }❌ 没有 return❌ undefined后面会持续更新。。。。。。。。。。。。。。。。。。。。