Vue-Router के साथ Vue में URL क्वेरी params कैसे सेट करें

Question

इनपुट फ़ील्ड बदलते समय, मैं वी-राउटर के साथ क्वेरी परम सेट करने का प्रयास कर रहा हूं , मैं किसी अन्य पृष्ठ पर नेविगेट नहीं करना चाहता हूं, लेकिन केवल उसी पृष्ठ पर url क्वेरी params को संशोधित करना चाहता हूं, मैं इस तरह कर रहा हूं:

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

लेकिन यह पेज को रिफ्रेश भी करता है और y पोजिशन को 0 पर सेट करता है, यानी पेज के ऊपर स्क्रॉल करता है। क्या यह URL क्वेरी परमेस सेट करने का सही तरीका है या इसे करने का एक बेहतर तरीका है।

---

संपादित:

यहाँ मेरा राउटर कोड है:

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' }})

Ref: https://router.vuejs.org/en/essentials/navigation.html

जैसा कि उन डॉक्स में बताया गया है, router.replaceजैसे काम करता हैrouter.push

तो, आपको लगता है कि आपके प्रश्न में यह नमूना कोड सही है। लेकिन मुझे लगता है कि आपको nameया तो pathपैरामीटर को भी शामिल करने की आवश्यकता हो सकती है , ताकि राउटर में नेविगेट करने के लिए कुछ मार्ग हो। nameया के बिना path, यह बहुत सार्थक नहीं दिखता है।

यह मेरी वर्तमान समझ है:

• query राउटर के लिए वैकल्पिक है - दृश्य निर्माण के लिए घटक के लिए कुछ अतिरिक्त जानकारी
• nameया pathअनिवार्य है - यह तय करता है कि आपके घटक को क्या दिखाना है <router-view>।

हो सकता है कि यह आपके सैंपल कोड में गायब हो।

EDIT: टिप्पणियों के बाद अतिरिक्त विवरण

क्या आपने इस मामले में नामित मार्गों का उपयोग करने की कोशिश की है ? आपके पास डायनामिक रूट हैं, और अलग से परमर्स और क्वेरी प्रदान करना आसान है:

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 में क्वेरी परम जोड़ना चाहता हूं, मुझे यहां कोई स्क्रॉल नहीं चाहिए।

— सौरभ

मैंने सिर्फ अपने स्थानीय सेटअप में विकल्पों का परीक्षण किया, क्वेरी पैरामन्स सामान्य रूप से काम करते हैं। मैं अपने अद्यतन उत्तर में दिखाए गए अनुसार नए मार्ग पर नेविगेट करने और क्वेरी परम तक पहुंचने में सक्षम हूं। तो, समस्या यह है - आप इसे स्क्रॉल करना नहीं चाहते हैं? या फिर समस्या पूरी ऐप को फिर से ताज़ा करने की है?

— मणि

इसलिए मैं उसी पृष्ठ पर हूं, जब मैं कुछ इनपुट का चयन करता हूं, तो मैं उन्हें URL में जोड़ना चाहता हूं, लेकिन जब मैं ऐसा करता हूं, तो स्क्रॉल होता है। स्क्रॉल मेरे लिए मुद्दा है। मैं दूसरे पृष्ठ पर जाने की कोशिश नहीं कर रहा हूं, मैं सिर्फ एक ही पृष्ठ पर रहना चाहता हूं और url क्वेरी params को जोड़ना / संशोधित करना प्रतीत होता है।

— सौरभ

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इसके बजाय का उपयोग करें ।

Vue 2.6.10 और Nuxt 2.8.1 के साथ परीक्षण किया गया।

इस विधि से सावधान रहें!
Vue Router को पता नहीं है कि url बदल गया है, इसलिए यह pushState के बाद url को प्रतिबिंबित नहीं करता है।

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त्रुटि के लिए नेतृत्व करते हुए, Vue Router का नेतृत्व करेंगे :

  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

कई क्वेरी params जोड़ने के लिए, यह वही है जो मेरे लिए काम किया है (यहाँ से https://forum.vuejs.org/t/vue-router-programmatically-append-to-querystring/3655/5 )।

ऊपर एक उत्तर करीब था ... हालांकि Object.assign के साथ यह इसे म्यूट कर देगा। $ path.query जो आप नहीं करना चाहते हैं ... सुनिश्चित करें कि Object.assign करते समय पहला तर्क {} है।

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