Vue音乐项目遇到的小问题

目前在自己的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 以上。