Vue小知识点汇总

最近接手公司前端项目，和几个同事改了前端的代码，总结下整改过程中的一些经验，方便自己，如果能帮到小伙伴们的话，那就很开心的了

1.前端调用后台接口，有两种，我们最近就调接口踩坑了，这里记录一下

1.1

前端代码（要注意请求头）：

getMsgByMobile(params) {
        return request({
            url: `${BASE_API}/mobile/common/getMsgByMobile` +
            "?mobile=" +
            params.phone +
            "&identity=0",
            method: "get",
            headers: {
                "content-type": "application/x-www-form-urlencoded",
            },
            data: params,
        });
    },

后台接口代码：

 @GetMapping("/getMsgByMobile")
 @ResponseBody
 public Object getMsgByMobile(HttpServletRequest request, String mobile, Integer identity)

1.2

前端代码（这里不用请求头）：

  updateCertWayPay(params) {
        return request({
            url: `${BASE_API}/WebV2/mobile/common/updateCertWayPay`,
            method: "POST",
            data: params,
        });
    },

后台代码（之前一直是通过request.getParameter("")取值，但是这次掉坑里了，前端明明传值了，但是后台一直拿不到值，所以加了@RequestBody接收前端的值放到JSONObject里，通过get的方法取值）：

@RequestMapping(value = "/updateCertWayPay", method = {RequestMethod.POST})
 @ResponseBody
 public Object updateCertWayPay(HttpServletRequest request, HttpServletResponse httpResponse,@RequestBody JSONObject query) 

2.有个需求是切换导航栏，需要根据导航栏的下拉子选项进入页面的时候也切换到对应的菜单栏，则需要监听路由：

//子页面监听
watch:{
$route(to, from) {
     //to是父级调用子页面时的路径  
      this.activeName = to.query.activeName;
      this.listNewsCenterInfo(1);
    }
}

3.router-link传参数：

:to="{path:'/newsDetail',query: {id: item.id}}"

4.子组件修改父组件的值

在子组件中需要修改父组件的数据，我们知道props传值，具有单向性，子组件改变其值会报错，这时候我们通过v-on绑定事件（方法名clickEvent必须和v-on定义的clickEvent一样）：

//父组件代码--LegalAuth子组件名称
<LegalAuth @clickEvent="clickEvent"></LegalAuth>
//父组件代码-方法名（data传进来的参数）
clickEvent(data) {
      debugger;
      this.oldAuthType = data;
      this.$route.query.authType = data;
      this.authType = data;
      if (data == 2 || data == 1 || data == 3) {
        this.isWait = true;
      }else{
        this.isWait = false;
      }
      console.log(this.oldAuthType);
    },


//子组件代码
this.$emit("clickEvent", 2);

5.复制内容到粘贴板上，并实现换行（换行是\r\n）：

copySuccess() {
      var text = "";
      text += "内容1" + "\r\n";
      text += "内容2" + "\r\n";
      text += "内容3" + "\r\n";
      text += "内容4";
      var textarea = document.createElement("textarea");
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      if (document.execCommand("copy")) {
        document.execCommand("copy");
        document.body.removeChild(textarea);
      }
      this.$message({
        showClose: true,
        message: "已成功复制到粘贴板上",
        type: "success"
      });
    }

6.query传值（参数和值会在路径中显示，页面刷新参数不会丢失）和params传值（参数和值被隐藏，页面刷新参数会失效），代码如下：

//query（path:路径；query:参数）
this.$router.push({
        path: "/Home",
        query: {
          cur: 0 
        }
      });
//取值
this.$route.query.cur



//params(name:路径；params：参数)
this.$router.push({
        name: "/Home",
        params: {
          cur: 0 
        }
      });
//取值
this.$route.params.cur