मैं एक URL से Vue.js में क्वेरी पैरामीटर कैसे प्राप्त कर सकता हूं?

Question

मैं Vue.js में क्वेरी पैरामीटर कैसे ला सकता हूं?

उदाहरण के लिए http://somesite.com?test=yay ।

लाने के लिए रास्ता नहीं मिल रहा है या क्या मुझे इसके लिए शुद्ध JS या कुछ लाइब्रेरी का उपयोग करने की आवश्यकता है?

Comments

यह नीचे क्यों हो रही है? मुझे इसकी आवश्यकता Vue.js. यदि कुछ पुट पुस्तकालय या उसमें निर्मित कुछ चीजें कच्चे जेएस पर पसंद की जाएंगी।

— रॉब

वीयू राउटर में शायद कुछ है, जो यह करता है, यदि आप इसका उपयोग कर रहे हैं।

— जो क्ले

एक डुप्लिकेट के करीब भी नहीं है। vue.js एक विशिष्ट तर्क के साथ एक रूपरेखा है, जो कि वेनिला जावास्क्रिप्ट से अलग है

— येरको पाल्मा

यह बिना राउटर के कैसे पूरा किया जा सकता है?

— कॉनर लीच

Answer 1

मार्ग ऑब्जेक्ट के डॉक्स के अनुसार , आपके पास $routeअपने घटकों से किसी ऑब्जेक्ट तक पहुंच है , जो कि आपकी आवश्यकता को उजागर करता है। इस मामले में

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

Comments

हाँ! यदि वह इससे उपयोग नहीं कर रहा vue-routerहै तो वास्तव में एक डुप्लिकेट होगा, क्योंकि उसे मानक JS विधियों का उपयोग करने की आवश्यकता होगी।

— जेफ

मैं सिर्फ यह मानता हूं कि क्योंकि एक ही उपयोगकर्ता ने vue-router के बारे में एक प्रश्न के ठीक पहले पोस्ट किया था, मैं vue- राउटर टैग बनाऊंगा अगर मेरे पास ऐसा करने की प्रतिष्ठा थी

— येरो पाल्मा

अच्छी बात! मैंने आगे बढ़कर vue-routerटैग बनाया और इसे जोड़ा।

— जेफ

समस्या यह है कि vue प्रलेखन राउटर के युग्मन घटकों को अवांछनीय मानता है। वे प्रॉप्स पास करने की सलाह देते हैं, लेकिन प्रॉपर के रूप में क्वेरी परमान को गतिशील रूप से पास करना संभव नहीं लगता। उदाहरण के लिए, पहले के गार्ड की तरह कुछ return next({ name: 'login', query:{param1: "foo" }, });करना काम नहीं करता है। लॉगिन घटक के अंदर प्रोप param1अपरिभाषित है।

— हरनौद h

Answer 2

बिना रूट-रूट के, यूआरएल को विभाजित करें

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(){
  },

Comments

location.hrefजब आप location.searchआसानी से उपलब्ध होंगे तो आप खुद को क्यों विभाजित करेंगे ? developer.mozilla.org/en-US/docs/Web/API/… उदाहरण के लिए var querypairs = window.location.search.substr(1).split('&');'=' द्वारा क्वेरी नाम-वैल्यू जोड़े को विभाजित करना हमेशा काम नहीं करेगा क्योंकि आप नामित क्वेरी मापदंडों को बिना मूल्य के भी पास कर सकते हैं; उदाहरण के लिए ?par1=15&par2आपका कोड अब par2 पर एक अपवाद बढ़ाएगा क्योंकि '=' से विभाजित होने के परिणामस्वरूप tmp में केवल 1 तत्व होगा।

— आर्थर

क्षमा करें, अपवाद नहीं फेंकेंगे लेकिन आप par2 को नहीं पकड़ेंगे। जैसा कि आप मूल रूप से असाइन undefinedकरते हैं getVars['par2']।

— आर्थर

GET विधि एक स्ट्रिंग (नाम / मान युग्म), में यूआरएल है

— erajuan

@ आप सही हैं, मैंने एक सत्यापन जोड़ा और मैंने एक और समाधान जोड़ा। धन्यवाद

— erajuan

Answer 3

अधिक विस्तृत उत्तर VueJS के newbies की मदद करने के लिए:

• सबसे पहले अपने राउटर ऑब्जेक्ट को परिभाषित करें, उस मोड का चयन करें जिसे आप फिट लगते हैं। आप मार्गों की सूची के अंदर अपने मार्गों की घोषणा कर सकते हैं।
• आगे आप चाहेंगे कि आपका मुख्य ऐप राउटर मौजूद है, इसलिए इसे मुख्य ऐप डिक्लेरेशन के अंदर घोषित करें।
• अंत में वे $ मार्ग उदाहरण में वर्तमान मार्ग के बारे में सभी जानकारी रखते हैं। कोड कंसोल यूआरएल में पारित पैरामीटर को लॉग करेगा। (* माउंटेड डॉक्यूमेंट के समान है। पहले से ही, यह ऐप के तैयार होते ही इसे कॉल करता है)

और कोड ही:

<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)
    },
});

Comments

कृपया इसे स्पष्ट करें

— मुहम्मद मुअज्जम

सबसे पहले अपने राउटर ऑब्जेक्ट को परिभाषित करें, जिस मोड में आप फिट हैं उसका चयन करें। आप मार्गों की सूची के अंदर अपने मार्गों की घोषणा कर सकते हैं। आगे आप चाहेंगे कि आपका मुख्य ऐप राउटर मौजूद है, इसलिए इसे मुख्य ऐप डिक्लेरेशन के अंदर घोषित करें। अंत में वे $ मार्ग उदाहरण में वर्तमान मार्ग के बारे में सभी जानकारी रखते हैं। मेरा कोड कंसोल केवल url में पारित पैरामीटर को लॉग करेगा। (* माउंटेड डॉक्यूमेंट के समान है। पहले से ही, यह ऐप के तैयार होते ही इसे कॉल करता है)

— सब्यसाची

और भी क्लूलेस न्यूबीज़ के लिए: VueRouter VueJS कोर में शामिल नहीं है, इसलिए आप VueRouter को अलग से शामिल करना चाह सकते हैं:<script src="https://unpkg.com/vue-router"></script>

— rustyx

@ सब्यसाची अपना उत्तर संपादित करें और उस जानकारी को पोस्ट के भीतर ही जोड़ें।

— साइमन फोर्सबर्ग

new Vue({ router, ... })मान्य सिंटैक्स नहीं है।

— वर्धमान ताजा

Answer 4

एक अन्य तरीका (यह मानते हुए कि आप उपयोग कर रहे हैं vue-router), क्वेरी राउटर को अपने राउटर में एक प्रोप में मैप करना है। फिर आप इसे अपने घटक कोड में किसी अन्य प्रोप की तरह मान सकते हैं। उदाहरण के लिए, इस मार्ग को जोड़ें;

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

फिर आपके घटक में आप प्रोप को सामान्य के रूप में जोड़ सकते हैं;

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

तब यह उपलब्ध होगा this.fooऔर आप इसके साथ कुछ भी कर सकते हैं (जैसे एक द्रष्टा सेट करें, आदि)

Comments

यह भी खूब रही। पहेली के लिए लापता टुकड़ा दीक्षा है। आप ऐसा कर सकते हैं: `यह। $ राऊटर। पप ({नाम: 'मेरा पेज', प्रश्न: {foo: 'bar'})`

— slf

Answer 5

इस तिथि के अनुसार, डायनेमिक रूटिंग डॉक्स के अनुसार सही तरीका है:

this.$route.params.yourProperty

के बजाय

this.$route.query.yourProperty

Comments

ये एक ही चीज नहीं हैं! आपको queryURL से क्वेरीज़ प्राप्त करने के लिए उपयोग करना चाहिए । डॉक्स से: $ path.params के अलावा, $ मार्ग ऑब्जेक्ट अन्य उपयोगी जानकारी जैसे $ path.query (यदि URL में कोई क्वेरी है) को भी उजागर करता है

— हैप्ट

स्पष्टीकरण के लिए धन्यवाद :)

— मार्को

Answer 6

आप वाउ-राउटर का उपयोग कर सकते हैं। मेरे पास एक उदाहरण है:

यूआरएल: 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करने के लिए nextfunction.It उपयोग करने के लिए अनुशंसा की जिस तरह से Vue instance.Actually है vmयह Vue उदाहरण के लिए खड़ा है

Answer 7

यदि आपका url कुछ इस तरह दिखता है:

somesite.com/something/123

जहां '123' 'id' नाम का एक पैरामीटर है (url like / something /: id), इसके साथ प्रयास करें:

this.$route.params.id

Answer 8

आप इस फ़ंक्शन का उपयोग करके प्राप्त कर सकते हैं।

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

Answer 9

यदि आपका सर्वर php का उपयोग करता है, तो आप यह कर सकते हैं:

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

बस काम करता है।

Comments

सवाल यह था कि कैसे Vue के साथ कुछ करना है, PHP के साथ नहीं।

— रोबर्टमैन