目前在自己的Vue音乐项目msimusic
内遇到的问题总结
Vue-Router间传递对象
错误用法导致结果:浏览器地址栏显示不正确,致使页面渲染不出来
原因:在vue路由间使用query
和动态路由
传值,最终都在url上体现出来,所以只能是字符串。
解决方法
- 发送端
const info=encodeURIComponent(JSON.stringify(this.songListInfo));
//JSON.stringify()将参数转换转换为JSON 字符串
//encodeURIComponent()函数字符串作为 URI 组件进行编码
- 接收端
const sheetInfo=JSON.parse(decodeURIComponent(this.$route.query.sheetInfo));
//decodeURIComponent() 方法用于解码由 encodeURIComponent 方法编码的部分统一资源标识符(URI)
//JSON.parse() 将JSON 字符串转换转换为原来的对象
插件 lyric-parser
解析出来的歌词排序混乱,时间不匹配
原因
网易云音乐接口拿到的歌词微秒位有三种情况(:100,:010,:10), npm 安装的默认time对应的是注释掉的情况。
解决方法
:找到对应的包,修改如下
Vue3.x下创建Vue-Router
因为之前在学习Vue基础知识时,接触的时Vue2.x,在项目中来学习的Vue3.x。在项目开始时通过Vue-CLI仅创建了基本的东西,Vue-router,vuex等是要用是在安装。
问题:
在创建router时,代码和直接用脚手架创建项目安装routerde代码一模一样,但就是运行不起来。
控制台显示错误:
未捕获的TypeError:Object(…)不是函数
原因:
Vue路由器3与Vue3一起安装时,会导致此问题,应该卸载当前版本。
解决:
//卸载当前版本
npm uninstall vue-router --save
//安装新的版本
npm i vue-router@next --save
或在package.json
手动改成 4 以上。