【记vue项目中的踩坑日记】一杯茶一包烟，一个bug搞一天

昨天在复习B站coderwhy老师的项目时，偶然发现了一个问题，弄了半天，最后才发现问题出在哪。
封装完底部的导航栏之后实现路由跳转出现了问题，在浏览器中既不报错，也不输出内容，路由跳转也没有用

整了2小时才发现问题出在路由的配置上，最终是在对路由进行懒加载中出现了错误

const Home=()=>{import( '../views/home/Home.vue')};
const Cart=()=>{import('../views/cart/Cart')};
const Category=()=>{import('../views/category/Category')};
const Profile=()=>{import('../views/profile/Profile')};

之所以这样写是因为，当敲到了箭头函数的时候，它自己默认后面加了个{}，我觉得箭头函数后面的大括号可用可不用，平时大多数都是用的，所以就没有特别注意它。但是在排错的时候所有的问题都想过，把这个给忽略了，最后抱着试一试的心态，还是把大括号给去掉了，发现路由跳转变正常了，我就觉得很奇怪，为什么会出现这个问题呢？

**这就涉及到箭头函数后面的大括号什么时候可以省略，什么时候不能省略呢？**我们下面就看一下下面的例子：

<script>let res = (r1, r2) => r1 + r2;let res2 = (r1, r2) => {r1 + r2}let res3 = (r1, r2) => {return (r1 + r2)}let r1 = res(1, 2);let r2 = res2(1, 2);let r3 = res3(1, 2);console.log(r1);console.log(r2);console.log(r3);</script>

最后的结果是：

原因是：

首先不加{}，这时箭头函数指向的就是这个函数的返回值，用在只返回返回值的时候，只写一个箭头，就行
另一种加{}，这就是一个代码块跟之前没区别，还是要写上返回值，就是要return 东西，不然什么也得不到

这就是两者的区别

然后我们再回来看是不是这个原因，我们将大括号里面加个return，发现结果也是可以正常跳转

const Home=()=>{ return import( '../views/home/Home.vue')};
const Cart=()=>{return import('../views/cart/Cart')};
const Category=()=>{return import('../views/category/Category')};
const Profile=()=>{ return import('../views/profile/Profile')};

这样也可以实现路由的正确跳转，但是最好还是正常写：

const Home=()=> import( '../views/home/Home.vue');
const Cart=()=> import('../views/cart/Cart');
const Category=()=> import('../views/category/Category');
const Profile=()=> import('../views/profile/Profile');

总结：
不了解的人，像我刚开始就乱用这个箭头函数的{}，想起来就加上，想不起来就不加，也没发现什么大问题。但是在项目里真的失之毫厘，差之千里。

【记vue项目中的踩坑日记】一杯茶一包烟，一个bug搞一天相关推荐

vue项目中onscroll的坑
vue项目中onscroll的坑在项目中需要监听一个组件的scroll事件,以触发到底时加载更多. 但是实际操作下来发现scroll事件并没有被监听到. 通过查询资料得知,监听的目标元素elemen ...
微信小程序项目转uniapp踩坑日记
本文目录一.前言二.转换方式三.后语四.其他:node报错 1.包默认C盘存放,而不是安装目录E盘 2.正确的环境变量添加 3.npm install 命令报错 4.npm install - ...
记录某项目中的踩坑与解决（持续更新）
前言最近参加了某个比赛, 我所选的赛题就是个类似知乎这样的安卓app,由于着手近一个月了,踩了不少坑,之前没怎么记录,估计事后也会忘记干净. 因此特开一帖,在此记录下相关的坑. 记录 Recycle ...
vue 项目中使用粘性布局不起作用_做vue项目中遇到的坑总结与学习
1.出现跨域问题(已经进行跨域设置的情况下) 这个问题找了半天....最后的解决方式:查看后台支持的编码格式和前端axios发送过去的的编码格式是否一致.不一致就会出现跨域问题.至于为什么也不明白,可 ...
4.Vue项目中下载本地pd、word、excel文件
记录:Vue项目中下载本地pdf.word.excel文件今日的一个需求是下载导入模板文件,该模板文件不是接口请求获取,而是本地的文件该文章属转载:Vue下载本地pdf.word.excel文件 ...
ReactNative 在丁香医生项目中引入的踩坑日记
ReactNative 在丁香医生项目中引入的踩坑日记 this没绑定到函数导致空指针参考 React-Native 踩坑第二弹-undefined is not a function(evalua ...
vue项目中更换tinymce版本踩坑
项目需求: vue项目中实现多图片批量上传功能问题: tinymce富文本编辑器的多图片批量上传插件支持版本:5.0.4+ 项目中现有的富文本编辑器版本:4.9.4 为实现这一功能选择更换tiny ...
学习踩坑：在Vue项目中使用svg标签却无法改变图标的颜色
在Vue项目中使用svg标签却无法改变图标的颜色在学习 vue 实战项目的过程中,用到了 svg 模块,对其使用了 fill 属性后,图标的颜色却没有任何的改变,反复查看了视频,步骤是一模一样的,却 ...
vue之猫眼json数据的获取直接用于自己的vue项目中,swiper轮播插件的坑
vue之猫眼json数据的获取直接用于自己的vue项目中遇到问题总结: 加载不出猫眼数据,无法调用,数据被限制猫眼电影图片的拼接及删除问题 swiper的迷幻坑** 首先来说一下第一问题加载不出 ...

【记vue项目中的踩坑日记】一杯茶一包烟，一个bug搞一天

【记vue项目中的踩坑日记】一杯茶一包烟，一个bug搞一天相关推荐

最新文章

热门文章