js獲取url參數值的幾種方式


一、原生js獲取URL參數值:

  比如當前URL為:http://localhost:8080/#/page2?id=100&name=guanxy

<template>
  <div>
    <div>
      <button style="background-color: orange" @click="getUrlParam">方式一:采用正則表達式獲取地址欄參數 (代碼簡潔,重點正則)</button>
      <p>結果:id={{method1_id}},name={{method1_name}}</p>
    </div>
    <div>
      <button style="background-color: green" @click="getUrlParam2"> 方法二:split拆分法 (代碼較復雜,較易理解)</button>
      <p>結果:id={{method2_id}},name={{method2_name}}</p>
    </div>
    <div>
      <button style="background-color: aqua" @click="getUrlParam3"> 方法三:split拆分法(根據參數名獲取對應的值)</button>
      <p>結果:id={{method3_id}},name={{method3_name}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "page2",
    data() {
      return {
        method1_id: '',
        method1_name: '',
        method2_id: '',
        method2_name: '',
        method3_id: '',
        method3_name: '',
      }
    },
    methods: {
      getUrlParam() {
        //為什么window.location.search取值為空?
        //“http://localhost:8080/#/page2?id=100&name=guanxy”那么使用window.location.search得到的就是空(“”)。
        // 因為“?id=100&name=guanxy”串字符是屬於“#/page2?id=100&name=guanxy”這個串字符的,也就是說查詢字符串search只能在取到“?”后面和“#”之前的內容,如果“#”之前沒有“?”search取值為空。
        this.method1_id = this.getQueryString('id');
        this.method1_name = this.getQueryString('name');
      },
      getQueryString(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        let url = window.location.hash.split('?')[1].match(reg);
        // console.log(url)
        if (url != null) {
          return decodeURI(url[2])//decodeURI() 函數可對 encodeURI() 函數編碼過的 URI 進行解碼。
        } else {
          return null
        }
      },
      getUrlParam2() {
        let url = window.location.hash.split('?')[1].split("&");
        // console.log(url)
        let paramObj = new Object()
        url.forEach((item, i) => {
          paramObj[item.split('=')[0]] = item.split('=')[1]
        })
        this.method2_id = paramObj.id,
          this.method2_name = paramObj.name
      },
      getUrlParam3() {
        this.method3_id = this.getQueryVariable('id');
        this.method3_name = this.getQueryVariable('name')
      },
      getQueryVariable(variable) {
        let url = window.location.hash.split('?')[1].split("&");
        for (let i = 0; i < url.length; i++) {
          let pair = url[i].split('=');
          if (pair[0] == variable) {
            return pair[1]
          }
        }
        return false
      }
    }
  }
</script>

<style scoped>

</style>

頁面效果:

二、Vue 獲取URL參數值

  <p>params獲取當前路由參數:id={{this.$route.params.id}},name={{this.$route.params.name}}</p>
  <p>query獲取當前路由參數:id={{this.$route.query.id}},name={{this.$route.query.name}}</p>

 

打賞

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2023 CODEPRJ.COM