ฉันจะรับพารามิเตอร์ข้อความค้นหาจาก URL ใน Vue.js ได้อย่างไร

ฉันจะดึงพารามิเตอร์การสืบค้นใน Vue.js ได้อย่างไร

http://somesite.com?test=yayเช่น

ไม่สามารถหาวิธีดึงข้อมูลหรือฉันจำเป็นต้องใช้ JS บริสุทธิ์หรือห้องสมุดบางอย่างสำหรับเรื่องนี้?

ตามเอกสารเส้นทางของวัตถุคุณสามารถเข้าถึง$routeวัตถุจากส่วนประกอบของคุณซึ่งแสดงสิ่งที่คุณต้องการ ในกรณีนี้

//from your component
console.log(this.$route.query.test) // outputs 'yay'

หากไม่มี vue-route ให้แบ่ง URL

var vm = new Vue({
  ....
  created()
  {
    let uri = window.location.href.split('?');
    if (uri.length == 2)
    {
      let vars = uri[1].split('&');
      let getVars = {};
      let tmp = '';
      vars.forEach(function(v){
        tmp = v.split('=');
        if(tmp.length == 2)
        getVars[tmp[0]] = tmp[1];
      });
      console.log(getVars);
      // do 
    }
  },
  updated(){
  },

โซลูชันอื่นhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search :

var vm = new Vue({
  ....
  created()
  {
    let uri = window.location.search.substring(1); 
    let params = new URLSearchParams(uri);
    console.log(params.get("var_name"));
  },
  updated(){
  },

คำตอบโดยละเอียดเพิ่มเติมเพื่อช่วยมือใหม่ของ VueJS:

• ก่อนกำหนดวัตถุเราเตอร์ของคุณเลือกโหมดที่คุณดูเหมือนว่าเหมาะสม คุณสามารถประกาศเส้นทางของคุณภายในรายการเส้นทาง
• ถัดไปคุณต้องการให้แอปหลักของคุณรู้ว่ามีเราเตอร์อยู่แล้วดังนั้นให้ประกาศไว้ในการประกาศแอปหลัก
• สุดท้ายพวกเขา $ instance instance เก็บข้อมูลทั้งหมดเกี่ยวกับเส้นทางปัจจุบัน รหัสจะบันทึกคอนโซลเพียงพารามิเตอร์ที่ส่งผ่านใน URL (* เมาท์จะคล้ายกับ document.ready, .i มันถูกเรียกทันทีที่แอพพร้อม)

และรหัสเอง:

<script src="https://unpkg.com/vue-router"></script>
var router = new VueRouter({
    mode: 'history',
    routes: []
});
var vm =  new Vue({
    router,
    el: '#app',
    mounted: function() {
        q = this.$route.query.q
        console.log(q)
    },
});

อีกวิธีหนึ่ง (สมมติว่าคุณกำลังใช้vue-router) คือการแมปแบบสอบถามพารามิเตอร์กับเสาในเราเตอร์ของคุณ จากนั้นคุณสามารถรักษามันเหมือนเสาอื่น ๆ ในรหัสส่วนประกอบของคุณ ตัวอย่างเช่นเพิ่มเส้นทางนี้

{ 
    path: '/mypage', 
    name: 'mypage', 
    component: MyPage, 
    props: (route) => ({ foo: route.query.foo })  
}

จากนั้นในองค์ประกอบของคุณคุณสามารถเพิ่มเสาได้ตามปกติ

props: {
    foo: {
        type: String,
        default: null
    }
},

จากนั้นจะพร้อมใช้งานthis.fooและคุณสามารถทำทุกอย่างที่ต้องการได้ (เช่นตั้งตัวเฝ้าดูเป็นต้น)

ณ วันที่นี้วิธีที่ถูกต้องตามเอกสารการกำหนดเส้นทางแบบไดนามิกคือ:

this.$route.params.yourProperty

แทน

this.$route.query.yourProperty

คุณสามารถใช้ vue-router ฉันมีตัวอย่างด้านล่าง:

url: www.example.com?name=john&lastName=doe

new Vue({
  el: "#app",
  data: {
    name: '',
    lastName: ''
  },
  beforeRouteEnter(to, from, next) {
      if(Object.keys(to.query).length !== 0) { //if the url has query (?query)
        next(vm => {
         vm.name = to.query.name
         vm.lastName = to.query.lastName
       })
    }
    next()
  }
})

หมายเหตุ:ในbeforeRouteEnterฟังก์ชั่นเราไม่สามารถเข้าถึงคุณสมบัติของส่วนประกอบเช่น: this.propertyNameนั่นคือเหตุผลที่ฉันได้ส่งผ่านvmไปยังnextฟังก์ชั่นมันเป็นวิธีที่แนะนำในการเข้าถึงอินสแตนซ์ vue จริงๆvmแล้วมันหมายถึงอินสแตนซ์ vue

หาก URL ของคุณมีลักษณะดังนี้:

somesite.com/something/123

โดยที่ '123' เป็นพารามิเตอร์ชื่อ 'id' (url like / something /: id) ลองด้วย:

this.$route.params.id

คุณสามารถได้โดยใช้ฟังก์ชั่นนี้

console.log(this.$route.query.test)

หากเซิร์ฟเวอร์ของคุณใช้ php คุณสามารถทำได้:

const from = '<?php echo $_GET["from"];?>';

เพิ่งได้ผล