【Vue】Vue项目开发中遇到的一些问题记录

本篇主要记录项目开发中遇到的一些问题，Vue2/3都有所涉及，重点讨论问题本身，不涉及Vue2/3版本的区别。

1.父子组件通信，传值为异步数据时，需要watch监听刷新子组件数据。

2.Vue项目某个页面需要在新标签页打开，写法：

const projectDetail = this.$router.resolve({
      path: '/project/detail',
      query: {......}
});
window.open(projectDetail.href, '_blank');

【重点】this.$router.resolve()，window.open(xxx.href, '_blank');

3.this.$route.query传参自动编码解码。

vue中使用$route的query传的值会被自动通过encodeURIComponent转码，也就是显示在浏览器地址栏里那串不易读的字符。同样的在vue里使用$route的query取值也会自动解码。

必须是通过query对象传参会自动编码，通过this.$router.query取参会自动解码，有时候路由跳转是自己拼接路径，这个时候需要手动编码。

const code = '+FGD';
// 方法一：query对象传参
this.$route.push({
    path: '/project/detail',
    query: {
        projectCode: code
    }
})

// 方法二：url直接拼接query参数，需手动编码（code包含特殊字符+）
this.$route.push(`/project/detail?projectCode=${encodeURIComponent(code)}`)

//url是 http://localhost:8080/project/detail?projectCode=%2BFGD
console.log(this.$route.query.projectCode)  // '+FGD'

4.vue3使用reactive定义对象，解构赋值或者赋值丢失响应式问题。

5.文件的上传与下载，使用el-upload。（http-request需要写一个空函数）。