আমি কীভাবে Vue.js এর URL থেকে কোয়েরি প্যারামিটারগুলি পেতে পারি?

251

আমি কীভাবে Vue.js এ কোয়েরি প্যারামিটারগুলি আনতে পারি?

যেমন http://somesite.com?test=yay।

আনার কোনও উপায় খুঁজে পাচ্ছি না বা এর জন্য আমাকে খাঁটি জেএস বা কিছু লাইব্রেরি ব্যবহার করতে হবে?

5

কেন ভোটে নামা হচ্ছে? Vue.js. এর জন্য আমার এটি দরকার যদি কোনও ভ্যু লাইব্রেরি থাকে বা এতে নির্মিত কিছু কাঁচা জেএসের চেয়ে পছন্দসই হবে।

— রব

ভিউ রাউটারে সম্ভবত এমন কিছু আছে যা এটি করে, যদি আপনি এটি ব্যবহার করে থাকেন।

— জো ক্লে

54

ডুপ্লিকেটের কাছাকাছিও নেই। vue.js একটি নির্দিষ্ট যুক্তিযুক্ত একটি কাঠামো, ভ্যানিলা জাভাস্ক্রিপ্ট থেকে আলাদা

— ইয়েরকো পলমা

13

ভ্যু-রাউটার ছাড়া এটি কীভাবে সম্পন্ন করা যায়?

— কনার জোঁক

345

রুট অবজেক্টের ডক্স অনুসারে , $routeআপনার উপাদানগুলি থেকে কোনও সামগ্রীতে আপনার অ্যাক্সেস রয়েছে যা আপনাকে যা প্রয়োজন তা প্রকাশ করে। এক্ষেত্রে

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

— ইয়ার্কো পালমা
সূত্র

8

হা! তিনি যদি এর থেকে vue-routerবেশি ব্যবহার না করে থাকেন তবে এটি অবশ্যই একটি সদৃশ হবে, কারণ তাকে স্ট্যান্ডার্ড জেএস পদ্ধতি ব্যবহার করতে হবে।

— জেফ

1

আমি কেবল ধরেই নিয়েছি যে একই ব্যবহারকারী ভ্যু-রাউটার সম্পর্কে কোনও প্রশ্নের আগে পোস্ট করেছিল, আমি যদি সেই খ্যাতি অর্জন করি তবে আমি

— ভ্যু

2

ভাল যুক্তি! আমি এগিয়ে গিয়ে vue-routerট্যাগটি তৈরি করে যুক্ত করেছি।

— জেফ

সমস্যাটি হ'ল ভ্যু ডকুমেন্টেশন রাউটারের সাথে কাপলিং উপাদানগুলিকে অযাচিত বলে বিবেচনা করে। তারা প্রপস পাস করার পরামর্শ দেয় তবে প্রোস হিসাবে গতিময়ভাবে ক্যোয়ারী প্যারামগুলি পাস করা সম্ভব বলে মনে হচ্ছে না। উদাহরণস্বরূপ, প্রতিটি প্রহরীতে এমন কিছু করা যেমন return next({ name: 'login', query:{param1: "foo" }, });কাজ করে না। লগইন উপাদান ভিতরে প্রোপ অপরিজ্ঞাত করা param1হয়।

— hraynaud

45

অমান্য-রুট ছাড়াই, ইউআরএল বিভক্ত করুন

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

— erajuan
সূত্র

2

location.hrefযখন location.searchসহজেই পাওয়া যায় তবে কেন নিজেকে বিভক্ত করবেন ? বিকাশকারী.মোজিলা.অর্গ / en var querypairs = window.location.search.substr(1).split('&');-US/docs/Web/API/… উদাহরণস্বরূপ ক্যোয়ারির নাম-মান জোড়গুলি '=' দ্বারা বিভক্ত করা সর্বদা কার্যকর হবে না কারণ আপনি নাম ছাড়া কোরিয়ার প্যারামিটারগুলিও পাস করতে পারবেন; উদাহরণস্বরূপ, ?par1=15&par2আপনার কোডটি এখন '2 'দ্বারা বিভাজন হিসাবে par2 এ একটি ব্যতিক্রম বাড়িয়ে তুলবে কেবলমাত্র 1 টি উপাদান দিয়ে টিএমপি হবে।

— আর্থার 21

1

দুঃখিত, একটি ব্যতিক্রম ছোঁড়ে না কিন্তু আপনি পার 2 ধরেন না। আপনি মূলত বরাদ্দ হিসেবে undefinedথেকে getVars['par2']।

— আর্থার 21

জিইটি পদ্ধতিটি একটি স্ট্রিং (নাম / মান জোড়া), ইউআরএল

— ইরজান

@ আর্থার আপনি ঠিক বলেছেন, আমি একটি বৈধতা যুক্ত করেছি এবং আমি আরও একটি সমাধান যুক্ত করেছি। আপনাকে ধন্যবাদ

— এরজুয়ান

37

ভ্যুজেএস-এর নতুনদের সহায়তা করার জন্য আরও বিস্তারিত উত্তর:

প্রথমে আপনার রাউটার অবজেক্টটি সংজ্ঞায়িত করুন, আপনাকে যে মোড উপযুক্ত মনে হয় তা নির্বাচন করুন। আপনি রুট তালিকার ভিতরে আপনার রুটগুলি ঘোষণা করতে পারেন।
এর পরে আপনি চাইবেন যে আপনার মূল অ্যাপটি রাউটারের উপস্থিতি জানতে পারে, তাই এটি মূল অ্যাপ্লিকেশন ঘোষণার মধ্যে ঘোষণা করুন।
শেষ অবধি তারা-রুট উদাহরণটি বর্তমান রুট সম্পর্কে সমস্ত তথ্য ধারণ করে। কোডটি ইউআরএল-এ কেবলমাত্র প্যারামিটারটি দিয়েই লগ কনসোল করবে। (* মাউন্ট করা হয়েছে ডকুমেন্টের মতোই, প্রস্তুত, অ্যাপ্লিকেশন প্রস্তুত হওয়ার সাথে সাথেই এটি কল করা হবে)

এবং কোড নিজেই:

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

— সব্যসাচী
সূত্র

7

দয়া করে এটি ব্যাখ্যা করুন

— মুহাম্মদ মোয়াজ্জাম

প্রথমে আপনার রাউটার অবজেক্টটি সংজ্ঞায়িত করুন, আপনার মোড মোডটি নির্বাচন করুন You আপনি রুট তালিকার অভ্যন্তরে আপনার রুটগুলি ঘোষণা করতে পারেন। এর পরে আপনি চাইবেন যে আপনার মূল অ্যাপটি রাউটারের উপস্থিতি জানতে পারে, তাই এটি মূল অ্যাপ্লিকেশন ঘোষণার মধ্যে ঘোষণা করুন। শেষ অবধি তারা-রুট উদাহরণটি বর্তমান রুট সম্পর্কে সমস্ত তথ্য ধারণ করে। আমার কোডটি ইউআরএল-এ কেবলমাত্র প্যারামিটারটি দিয়েই লগ কনসোল করবে। (* মাউন্ট, document.ready .ie অনুরূপ তার নামক শীঘ্রই অ্যাপ্লিকেশান হিসাবে হিসাবে প্রস্তুত হয়)

— সব্যসাচী

3

আরও অজ্ঞাত newbies জন্য: VueRouter VueJS কোর অন্তর্ভুক্ত করা হয় না, তাই আপনি পৃথকভাবে VueRouter অন্তর্ভুক্ত করতে চাইতে পারেন:<script src="https://unpkg.com/vue-router"></script>

— rustx

2

@ সব্যসাচী আপনার উত্তরটি সম্পাদনা করুন এবং পোস্টের মধ্যেই সেই তথ্য যুক্ত করুন।

— সাইমন ফারসবার্গ

1

new Vue({ router, ... })বৈধ সিনট্যাক্স নয়।

— ক্রিসেন্ট তাজা

17

আর একটি উপায় (ধরে নিচ্ছেন যে আপনি ব্যবহার করছেন) vue-router ), আপনার রাউটারের কোনও প্রপিতে ক্যোয়ারী পরম ম্যাপ করা। তারপরে আপনি এটিকে আপনার উপাদান কোডের অন্য কোনও প্রোপের মতো আচরণ করতে পারেন। উদাহরণস্বরূপ, এই রুটটি যুক্ত করুন;

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

তারপরে আপনার উপাদানগুলিতে আপনি প্রপটি স্বাভাবিক হিসাবে যুক্ত করতে পারেন;

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

তারপরে এটি উপলব্ধ হবে this.fooএবং আপনি এটি দিয়ে যা কিছু করতে পারেন (যেমন কোনও নজরদারি সেট করা ইত্যাদি)

— মাইক পি
সূত্র

এটা অসাধারণ. ধাঁধার কাছে অনুপস্থিত অংশটি হল দীক্ষা। আপনি এটির মতো এটি করতে পারেন: `এটি $ রাউটার.পুশ ({নাম: 'মাইপেজ', ক্যোরি: {foo: 'বার'})`

— এসএলএফ

7

এই তারিখ হিসাবে, গতিশীল রাউটিং ডক্স অনুযায়ী সঠিক উপায় :

this.$route.params.yourProperty

পরিবর্তে

this.$route.query.yourProperty

— মার্কো
সূত্র

3

এগুলো এক জিনিস না! queryইউআরএল থেকে প্রশ্নগুলি পেতে আপনার ব্যবহার করা উচিত । ডক্স থেকে: $ route.params ছাড়াও, $ রুট বস্তুর এছাড়াও অন্যান্য প্রয়োজনীয় তথ্য যেমন $ route.query যেমন অনাবৃত (যদি সেখানে URL একটি ক্যোয়ারী হয়)

— hatef

স্পষ্টতার জন্য ধন্যবাদ :)

— মার্কো

2

আপনি ভ্যু-রাউটার ব্যবহার করতে পারেন I আমার নীচে একটি উদাহরণ রয়েছে:

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.That কেন আমি পাস আছে vmকরার nextfunction.It অ্যাক্সেস করতে recommented পথ Vue instance.Actually হয় vmএটা Vue উদাহরণস্বরূপ দাঁড়িয়েছে

— রোলি রোলি
সূত্র

2

যদি আপনার ইউআরএল কিছু দেখতে লাগে:

somesite.com/something/123

যেখানে '123' হ'ল 'আইডি' নামে একটি প্যারামিটার (ইউআরএল লাইক / কিছু / / আইডি), সেখানে চেষ্টা করুন:

this.$route.params.id

— trishke
সূত্র

1

আপনি এই ফাংশনটি ব্যবহার করে পেতে পারেন।

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

— রেভাতি রমন
সূত্র

-6

যদি আপনার সার্ভার পিএইচপি ব্যবহার করে তবে আপনি এটি করতে পারেন:

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

শুধু কাজ করে।

— কও শৌগাং
সূত্র

2

প্রশ্নটি ছিল পিএইচপি দিয়ে নয়, ভ্যু দিয়ে কীভাবে কিছু করা যায়।

— রবার্টমেইন