快捷導(dǎo)航

vue如何清除地址欄參數(shù)

更新時(shí)間：2022年08月31日 09:41:31 作者：我是關(guān)小花

這篇文章主要介紹了vue如何清除地址欄參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue清除地址欄參數(shù)

第一種：

this.$router.push({ query: {} });

第二種：

let path = this.$route.path; //先獲取路由路徑
this.$router.push(path); //再跳轉(zhuǎn)路由路徑，query參數(shù)沒(méi)帶過(guò)去，所以被清除了

獲取地址欄參數(shù)并且截取

今天寫(xiě)項(xiàng)目遇到這樣一個(gè)問(wèn)題，因?yàn)槲沂菃为?dú)寫(xiě)的三個(gè)頁(yè)面，我那個(gè)頁(yè)面獲取數(shù)據(jù)是要獲取到上個(gè)頁(yè)面?zhèn)鬟^(guò)來(lái)的參數(shù)才能進(jìn)行請(qǐng)求，因?yàn)閯傞_(kāi)始寫(xiě)參數(shù)是直接寫(xiě)成固定死的了

然后我就在想，肯定要獲取到當(dāng)前頁(yè)面的url地址，這樣后邊才能截取url地址中的參數(shù)，代碼如下

     var url = window.location.href; //獲取地址欄路徑
     var temp1 = url.split('?');//對(duì)url地址進(jìn)行分割
     var pram = temp1[1];
     var keyValue = pram.split("&");
     var obj = {};
     for (var i = 0; i < keyValue.length; i++) {//循環(huán)分割掛過(guò)后的地址
       var item = keyValue[i].split("=");
       var key = item[0];
       var value = item[1];
       obj[key] = value;
     }
     console.log(url);
     console.log(pram);
     console.log(keyValue);
     consile.log(obj)//obj就是我么分割后從上個(gè)頁(yè)面?zhèn)鬟^(guò)來(lái)數(shù)據(jù)的對(duì)象
     console.log(obj.orgCode);
     this.orgCode = obj.orgCode;//對(duì)data里面定義的orgCode進(jìn)行賦值

我是要取到上面代碼中obj對(duì)象里面的orgCode參數(shù)，然后在接口中進(jìn)行拼接參數(shù)就可以了

然后這個(gè)寫(xiě)完我又遇到了一個(gè)問(wèn)題，如果從上個(gè)頁(yè)面沒(méi)傳過(guò)來(lái)參數(shù)的話(huà)，瀏覽器會(huì)報(bào)split的錯(cuò)。因?yàn)楹筮厸](méi)有參數(shù)進(jìn)行分割，如下圖

后來(lái)我又想到一個(gè)方法，我們可以在進(jìn)行split分割的時(shí)候進(jìn)行判斷，有參數(shù)的話(huà)就進(jìn)行分割，沒(méi)傳過(guò)來(lái)參數(shù)就return false 返回一個(gè)false值代碼如下：

//在methods里面定義一個(gè)方法
 getQueryString(variable) {
      var index = window.location.href.indexOf("?");//獲取地址欄路徑并進(jìn)行分割
      var query = window.location.href.substr(
        index + 1,
        window.location.href.length
      );
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;//如果沒(méi)有參數(shù)就返回false 值，就不會(huì)出現(xiàn)上邊報(bào)錯(cuò)的情況了
    },

然后我們需要在上邊調(diào)用這個(gè)方法

  created() {
    //調(diào)用請(qǐng)求接口并獲取url的orgCode參數(shù)
    this.Getactiononlad(this.getQueryString("orgCode"));
  },

上面代碼 this.Getactiononlad是我定義的請(qǐng)求接口方法

在后邊直接在調(diào)用獲取url地址的方法

orgCode就是要獲取的參數(shù)

 methods: {
    Getactiononlad(orgCode) {//定義請(qǐng)求接口的方法
    //要把orgCode傳在方法里面
      getObjectInfo(orgCode, this.ApprovalUserName)//getObjectInfo是在api封裝好的接口
        .then((res) => {
          if (res.isSuccess == true) {
            if (res.data.list.length > 0) {
              this.$toast("請(qǐng)求成功");
              this.iSshownotFiled = false;
              res.data.list.forEach((element) => {
                this.Ordersubmitlist.push(element);
              });
            } else {
              this.iSshownotFiled = true;
            }
          } else {
            this.$$toast("請(qǐng)求出現(xiàn)異常");
          }
        })
        .catch((error) => {
          this.$toast(error.message);
        });
    },
    }

這個(gè)時(shí)候我們看一下效果