vue踩坑记录(持续更新......)

82 阅读1分钟

偷偷努力的感觉很好,不张扬,也不埋怨,自己一点点的去改变,等你告别了以前的自己,你就可以很自豪的对自己说:“哇,你也太棒了,你终于熬过来了”。

1、vue-router使用嵌套的命名路由时,访问路由地址后界面什么都没有

业务逻辑:使用公共菜单组件Layouts,主页面嵌套drag页面。

错误代码:

1693473339081.png 错误原因:没有匹配到嵌套路由地址,因为此时嵌套的子路由地址为:"/home/drag"。

解决方法1:

path路径设置为空‘’,如下所示: 1693473447567.png

解决方法2:

使用路由重定向,保留嵌套路由的路径path(如果需求是使重定向后的路由与原路由名称保持一致,可以在嵌套路由内使用别名:alias),如下所示: 1693473738183.png

2、使用element-plus菜单时,当前菜单未高亮,低级bug,粗心

业务逻辑:定义一个菜单数据js,循环渲染到菜单。

错误代码:

1693475561534.png 错误原因: el-menu的唯一标志是index,并非为循环的key

解决方法:

循环menu-item时,绑定index为唯一值。

1693476251812.png

3、下载文件时,获取到的response为undefined,无法下载文件

错误原因:返回的为blob文件格式,接口请求时未指定响应数据的类型,无法识别,所以返回值为undefined

解决方法:

编写接口时,设置接口响应类型为blob格式

// 接口定义
export funxtion downloadApi(file){
    return http.get('download/api/file?fileId=" + file, { responseType: "blob"}
}