ভ্যু-রাউটারের সাথে কীভাবে ইউআরএল কোয়েরি প্যারামগুলি সেট করবেন

Question

ইনপুট ক্ষেত্রগুলি পরিবর্তন করার সময় আমি ভ্যু-রাউটারের সাথে ক্যোয়ারী প্যারামগুলি সেট করার চেষ্টা করছি , আমি অন্য কোনও পৃষ্ঠাতে নেভিগেট করতে চাই না তবে কেবল একই পৃষ্ঠায় url ক্যোয়ারী প্যারামগুলি সংশোধন করতে চাই, আমি এটি করছি:

this.$router.replace({ query: { q1: "q1" } })

তবে এটি পৃষ্ঠাটি রিফ্রেশ করে y পজিশনটি 0 তে স্থির করে, অর্থাত পৃষ্ঠার শীর্ষে স্ক্রোলগুলি। এটি কি ইউআরএল ক্যোয়ারী প্যারামগুলি সেট করার সঠিক উপায় বা এটি করার আরও ভাল উপায় আছে।

---

সম্পাদিত:

এখানে আমার রাউটার কোডটি রয়েছে:

export default new Router({
  mode: 'history',
  scrollBehavior: (to, from, savedPosition)  => {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return {x: 0, y: 0}
    }
  },
  routes: [
    ....... 
    { path: '/user/:id', component: UserView },
  ]
})

Answer 1

দস্তাবেজের উদাহরণ এখানে:

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

রেফ: https://router.vuejs.org/en/essentials/navication.html

এই ডক্সে উল্লিখিত হিসাবে, router.replaceকাজ করেrouter.push

সুতরাং, মনে হচ্ছে আপনার প্রশ্নে আপনার নমুনা কোডটিতে এটি ঠিক আছে। তবে আমি মনে করি আপনার উভয়টি nameবা pathপ্যারামিটারও অন্তর্ভুক্ত করার দরকার হতে পারে , যাতে রাউটারটিতে নেভিগেট করার কিছু পথ থাকে। nameবা একটি ছাড়া pathএটি খুব সার্থক মনে হয় না।

এটি এখন আমার বর্তমান বোঝাপড়া:

• query রাউটারের জন্য optionচ্ছিক - ভিউটি তৈরির জন্য উপাদানটির জন্য কিছু অতিরিক্ত তথ্য
• nameবা pathবাধ্যতামূলক - এটি আপনার মধ্যে কোন উপাদান প্রদর্শন করবে তা স্থির করে <router-view>।

এটি আপনার নমুনা কোডের অনুপস্থিত জিনিস হতে পারে।

সম্পাদনা: মন্তব্যের পরে অতিরিক্ত বিশদ

আপনি কি এই ক্ষেত্রে নামযুক্ত রুটগুলি ব্যবহার করার চেষ্টা করেছেন ? আপনার গতিশীল রুট রয়েছে, এবং পৃথকভাবে প্যারাম সরবরাহ এবং ক্যোয়ারী সরবরাহ করা সহজ:

routes: [
    { name: 'user-view', path: '/user/:id', component: UserView },
    // other routes
]

এবং তারপরে আপনার পদ্ধতিতে:

this.$router.replace({ name: "user-view", params: {id:"123"}, query: {q1: "q1"} })

প্রযুক্তিগতভাবে উপরোক্ত এবং এর মধ্যে কোনও পার্থক্য নেই this.$router.replace({path: "/user/123", query:{q1: "q1"}})তবে রুটের স্ট্রিং রচনা করার চেয়ে নামযুক্ত রুটে গতিশীল প্যারাম সরবরাহ করা সহজ। তবে উভয় ক্ষেত্রেই ক্যোয়ারী প্যারামগুলি বিবেচনায় নেওয়া উচিত। উভয় ক্ষেত্রেই, ক্যোয়ারী প্যারামগুলি যেভাবে পরিচালিত হয় তাতে আমি কোনও ভুল খুঁজে পাইনি।

আপনি রুটের অভ্যন্তরে আসার পরে, আপনি আপনার গতিশীল প্যারামগুলি this.$route.params.idএবং আপনার ক্যোয়ারী প্যারামগুলি আনতে পারেন this.$route.query.q1।

Comments

আমিও পথটি দেওয়ার চেষ্টা করেছি, তবে এটি পৃষ্ঠার শীর্ষে স্ক্রোলিং থামেনি, আমি রাউটার বিকল্পগুলির সাথেও প্রশ্নটি সম্পাদনা করেছি, সেখানে কিছু পরিবর্তন প্রয়োজন হতে পারে।

— সৌরভ

আপনার ক্যোয়ারী পরম নথির সঠিক জায়গায় স্ক্রোল করার উদ্দেশ্যে রয়েছে? অ্যাঙ্কার ট্যাগগুলিতে আপনার অন্যান্য প্রশ্নের মতো ?

— মণি

না, আমি শুধু ইউআরএলটিতে ক্যোয়ারী পরম যুক্ত করতে চাই, আমি এখানে কোনও স্ক্রোল চাই না।

— সৌরভ

আমি আমার স্থানীয় সেটআপে কেবলমাত্র বিকল্পগুলি পরীক্ষা করেছি, ক্যোয়ারী প্যারামগুলি স্বাভাবিকভাবে কাজ করে। আমি আমার আপডেট উত্তরে দেখানো হিসাবে নতুন রুটে নেভিগেট করতে এবং ক্যোয়ারী প্যারামগুলিতে অ্যাক্সেস করতে সক্ষম হয়েছি। সুতরাং, সমস্যাটি হল - আপনি কি এটি স্ক্রোল করতে চান না? বা সমস্যাটি কি পুরো অ্যাপটি আবার সতেজ হয়?

— মণি

সুতরাং আমি একই পৃষ্ঠায় আছি, যখন আমি কিছু ইনপুট নির্বাচন করি তখন আমি সেগুলিকে ইউআরএলটিতে যুক্ত করতে চাই, তবে যখন আমি এটি করি, স্ক্রোল ঘটে। স্ক্রোলটি আমার জন্য সমস্যা। আমি অন্য পৃষ্ঠায় নেভিগেট করার চেষ্টা করছি না, আমি কেবল একই পৃষ্ঠায় থাকতে চাই এবং url ক্যোয়ারী প্যারামগুলিকে অযৌক্তিকভাবে যুক্ত / সংশোধন করতে চাই।

— সৌরভ

Answer 2

পৃষ্ঠাটি পুনরায় লোড করা বা ডোমকে রিফ্রেশ history.pushStateনা করে কাজটি করতে পারে।
এটি করতে আপনার উপাদান বা অন্য কোথাও এই পদ্ধতিটি যুক্ত করুন:

addParamsToLocation(params) {
  history.pushState(
    {},
    null,
    this.$route.path +
      '?' +
      Object.keys(params)
        .map(key => {
          return (
            encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
          )
        })
        .join('&')
  )
}

আপনার উপাদানগুলির যে কোনও জায়গায়, addParamsToLocation({foo: 'bar'})উইন্ডো হিস্টোরি স্ট্যাকের ক্যোয়ারী প্যারামগুলির সাথে বর্তমান অবস্থানটি ধাকানোর জন্য কল করুন।

নতুন ইতিহাসের এন্ট্রি না ধাক্কা দিয়ে বর্তমান অবস্থানে ক্যোয়ারী প্যারাম যুক্ত করতে , history.replaceStateপরিবর্তে ব্যবহার করুন।

ভ্যু 2.6.10 এবং নেক্সট 2.8.1 এর সাথে পরীক্ষিত।

এই পদ্ধতিতে সাবধান!
ভিউ রাউটার জানেন না যে ইউআরএল পরিবর্তিত হয়েছে, সুতরাং এটি পুশস্টেটের পরে ইউআরএল প্রতিফলিত করে না।

Answer 3

প্রকৃতপক্ষে আপনি কেবল এই জাতীয় জিজ্ঞাসাটি চাপতে পারেন: this.$router.push({query: {plan: 'private'}})

ভিত্তিক: https://github.com/vuejs/vue-router/issues/1631

Comments

"তবে এটি পৃষ্ঠাটি

— রিফ্রেশও করে

Answer 4

this.$router.push({ query: Object.assign(this.$route.query, { new: 'param' }) })

Comments

আমার এই উত্তরটি সবচেয়ে ভাল লেগেছে। দুর্ভাগ্যক্রমে এটি Error: Avoided redundant navigation to current location

— ম্যাক্স কপলান

স্থির করুন:this.$router.push({ query: Object.assign({...this.$route.query}, { new: 'param' }) })

— সর্বাধিক কোপলান

তবে এখন আমি এটি সম্পর্কে ভাবছি যে আপনি ঠিক করতে পারেনthis.$router.push({ query: {...this.$route.query,new: 'param'},) })

— ম্যাক্স কপলান

Answer 5

আপনি যদি কিছু প্যারামিটার রাখার চেষ্টা করছেন, অন্যকে পরিবর্তন করার সময়, ভ্যু রাউটারের ক্যোয়ারীর অবস্থার অনুলিপিটি অনুলিপি করতে এবং এটি পুনরায় ব্যবহার না করার বিষয়ে নিশ্চিত হন।

এটি কাজ করে, যেহেতু আপনি একটি অননুমোদিত অনুলিপি তৈরি করছেন:

  const query = Object.assign({}, this.$route.query);
  query.page = page;
  query.limit = rowsPerPage;
  await this.$router.push({ query });

নীচে যখন ভ্যু রাউটারকে ভেবে দেখবেন আপনি একই প্রশ্নটি পুনরায় ব্যবহার করছেন এবং NavigationDuplicatedত্রুটির দিকে পরিচালিত করছেন:

  const query = this.$route.query;
  query.page = page;
  query.limit = rowsPerPage;
  await this.$router.push({ query });

অবশ্যই, আপনি কোয়েরি অবজেক্টটি যেমন, নীচের মতো পচন করতে পারেন তবে আপনার পৃষ্ঠায় সমস্ত ক্যোয়ারী প্যারামিটার সম্পর্কে সচেতন হওয়া দরকার, অন্যথায় ফলস্বরূপ নেভিগেশনে সেগুলি হারাতে আপনার ঝুঁকি রয়েছে।

  const { page, limit, ...otherParams } = this.$route.query;
  await this.$router.push(Object.assign({
    page: page,
    limit: rowsPerPage
  }, otherParams));
);

দ্রষ্টব্য, উপরের উদাহরণটির জন্য হলেও এটি push()কাজ replace()করে।

ভ্যু-রাউটার 3.1.6 দিয়ে পরীক্ষা করা হয়েছে।

Answer 6

একাধিক ক্যোয়ারী প্যারাম যুক্ত করার জন্য, এটি আমার জন্য কাজ করেছিল (এখান থেকে https://forum.vuejs.org/t/vue-router-programically-append-to-querystring/3655/5 )।

উপরের উত্তরটি নিকটবর্তী ছিল ... যদিও অবজেক্ট.সেসাইন দিয়ে এটি এটিকে রূপান্তরিত করবে $ রুট.কিউরি যা আপনি যা করতে চান তা নয়… অবজেক্ট.সেসাইন করার সময় নিশ্চিত করুন যে প্রথম আর্গুমেন্টটি {is

this.$router.push({ query: Object.assign({}, this.$route.query, { newKey: 'newValue' }) });

Answer 7

একসাথে একাধিক ক্যোয়ারী প্যারামগুলি সেট / অপসারণ করতে আমি আমার বৈশ্বিক মিশ্রণের অংশ হিসাবে নীচের পদ্ধতিগুলি শেষ করেছি ( thisউপাদানটির প্রতি বিন্দু):

    setQuery(query){
        let obj = Object.assign({}, this.$route.query);

        Object.keys(query).forEach(key => {
            let value = query[key];
            if(value){
                obj[key] = value
            } else {
                delete obj[key]
            }
        })
        this.$router.replace({
            ...this.$router.currentRoute,
            query: obj
        })
    },

    removeQuery(queryNameArray){
        let obj = {}
        queryNameArray.forEach(key => {
            obj[key] = null
        })
        this.setQuery(obj)
    },

Answer 8

আমি সাধারণত ইতিহাসের বিষয়টিকে এর জন্য ব্যবহার করি। এটি পৃষ্ঠাটি পুনরায় লোড করে না।

উদাহরণ:

history.pushState({}, '', 
                `/pagepath/path?query=${this.myQueryParam}`);

Answer 9

পৃষ্ঠাটি রিফ্রেশ না করে URL এ ক্যোয়ারী প্যারামগুলি আপডেট করার জন্য আমার সহজ সমাধান। আপনার ব্যবহারের ক্ষেত্রে এটি কাজ করে তা নিশ্চিত করুন।

const query = { ...this.$route.query, someParam: 'some-value' };
this.$router.replace({ query });