前端开发过程中遇到问题记录

问题记录：

一、vue + iview + 高德地图,把map组键放在Modal中，搜索（Autocomplete）结果不显示问题

查看源码后发现是因为css样式问题。

问题解决

修改Autocomplete的css属性z-index为大于或等于9999即可。

.amap-sug-result { z-index: 9999; }

二、静态引入的有一些图片过大，在一些机型上，会导致整个页面显示白屏

问题解决

压缩图片

三、同一个组件，table切换请求数据，再回到原来的table下时候，需停留原来的位置，滚动条位置不变。（注意：因为不是切换不用的组件，所以不能使用vue 的keep-alive缓存tab切换的组件）

问题解决

思路：每个table下的数据，都单独缓存起来，每一组数据的变量名可以考虑table的id+自定义名称，保证唯一性，每一组数据的可以都放在同一个变量内，然后就依据切换的table判断显示不同的数据了（每次切换，不能再发起新的请求）

四、在Vue项目中使用element的select组件，select选中的值不显示，watch监听也不触发

原因：因为是从后端获取到的数据，select中 v-model绑定的变量不一定有，在绑定的参数没有情形会导致使用该现象

解决思路：在data中定义一个变量【包含需要使用的全部数据】，然后把接口返回的数据和data定义的数据进行合并

 // 若存在相同属性，后面的覆盖前面的
方法一：ES6的解构
  this.dataInfo = {
                    ...this.dataInfo, // data中定义的
                    ...res.data // 接口返回的
                }

方法二：Object.assign
  this.dataInfo  =  Object.assign(this.dataInfo, res.data)

五、在Vue单页面项目中，A页面跳转B页面，页面不刷新（生命周期会执行，但是一些文件的JS没有重新加载，而是沿用A页面的），然后B页面返回A页面会重新刷新

🌟🌟首先我们理一下URL的各个组成部分详解
构造一个完整URL例子：

https://blog.csdn.net:8080/weixin/index.html?param=123&page=1#weixin_43778426

一个完整的URL包括：协议部分、域名部分、端口部分、虚拟目录部分、文件名部分、参数部分、锚部分

1.协议部分：该URL的协议部分为“http：”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在”HTTP”后面的“//”为分隔符

2.域名部分：该URL的域名部分为“www.aspxfans.com”。一个URL中，也可以使用IP地址作为域名使用

3.端口部分：跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口

4.虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/weixin/”

5.文件名部分：从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。本例中的文件名是“index.html”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名

7.参数部分：从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“param=123&page=1”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。

6.锚部分：HTTP请求不包括锚部分，从“#”开始到最后，都是锚部分。本例中的锚部分是“r_70732423“。锚部分也不是一个URL必须的部分。
锚点作用：打开用户页面时滚动到该锚点位置。如：一个html页面中有一段代码，该url的hash为weixin_43778426

🌟🌟造成页面跳转不刷新原因：

https://blog.csdn.net#/weixin_43778426?portraitParam=123

在项目中从A页面跳转到B页面（URL如上），《文件名部分》在哈希（#）后面，《参数部分》在文件名后面，在跳转时候在《文件名》和《参数部分》都改变了， 但是在B页面打印window.location.href却是A页面的URL而不是B页面的URL，然后浏览器判断判断还是在A页面，从而在导致B页面的数据、DOM 元素都变化了，但是一些A页面的JS还是存在B页面中。

思索：
1、感觉是哈希值（#）导致的，可以考虑去掉哈希值，VueRouter 可以使用history（不确定，待验证）

本人实验了第2、第3两种方法结合

2、如果不去掉哈希（#），可以把《参数部分》放在《域名部分》后面，《文件名部分》放在最后面，如下：

处理后A==>B的URL：
https://blog.csdn.net?portraitParam=123#/weixin_43778426

3、如果还是不起作用，可以考虑在《参数部分》多加一个参数，如（时间、随机数），保持每个URL唯一性

let time = (new Date()).getTime()
https://blog.csdn.net?portraitParam=123&time=time#/weixin_43778426

六、vue页面中的style 加 scoped属性，导致样式失效

style 节点的 scoped 属性是为了防止组件之间的样式冲突,实现样式模块私有化,避免全局样式污染
对于 style上加了 scope 属性的组件，在渲染时会主动加上 data-v-xx 的属性来唯一标识当前组件
如果给当前组件的 style 节点添加了 scoped 属性,则当前的样式对其子组件是不生效的,

我们写的样式：

<style lang="less" scoped>
.title .title-color{
    color: white;
  }
</style>

编译后的样式

<style lang="less" scoped>
.title .title-color[data-v-xxx]{
    color: white;
  }
</style>

解决办法：
1、使用属性穿透：>>> 或 /deep/ 或 ::v-deep

<style lang="css" scoped>
.title >>> .title-color{
    color: white;
}
</style>

// less和sass用/deep/ 或 ::v-deep

<style lang="less" scoped>
.title /deep/ .title-color{
    color: white;
}
</style>

<style lang="sass" scoped>
.title ::v-deep .title-color{
    color: white;
}
</style>

2、使用两个 style 标签，就是去掉scoped

<style>
/* 用于修改第三方库的样式 */
</style>
 
<style scoped>
/* 自己的组件内样式 */