Vuejs: मार्ग परिवर्तन की घटना

Question

मेरे मुख्य पृष्ठ में मेरे पास ड्रॉपडाउन हैं जो v-show=showलिंक पर क्लिक करके दिखाते हैं @click = "show=!show"और मैं show=falseरूट बदलने पर सेट करना चाहता हूं। कृपया मुझे सलाह दें कि इस बात को कैसे महसूस किया जाए।

Answer 1

अपने घटक पर एक द्रष्टा को $routeइस तरह सेट करें:

watch:{
    $route (to, from){
        this.show = false;
    }
} 

यह मार्ग परिवर्तनों के लिए अवलोकन करता है और जब बदला जाता है, तो showगलत पर सेट होता है

Comments

और उपयोग करें $route: function(to, from) {यदि आप पुराने ब्राउज़रों का समर्थन करना चाहते हैं, और बेबल का उपयोग नहीं कर रहे हैं।

— पॉल लेबेउ

लेकिन अगर मैं घटक को तुरंत शुरू / आरंभ कर रहा हूँ, तो मैं मार्ग या क्वेरी परम को कैसे रूट कर सकता हूं? क्या मैं इसे बनाया () या माउंट किया हुआ () या इससे पहले का उपयोग करूंगा / करूँगी जीवनचक्र हुक या कहाँ?

— user2774480

Answer 2

यदि आप v2.2.0 का उपयोग कर रहे हैं तो $ मार्गों में परिवर्तन का पता लगाने के लिए एक और विकल्प उपलब्ध है।

एक ही घटक में बदलावों पर प्रतिक्रिया करने के लिए, आप केवल $ मार्ग ऑब्जेक्ट देख सकते हैं:

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

या, 2.2 में पेश किए गए पहले RouteUpdate गार्ड का उपयोग करें:

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

संदर्भ: https://router.vuejs.org/en/essentials/dynamic-matching.html

Comments

एक नोट: beforeRouteUpdateकेवल उस दृष्टिकोण पर काम करता है जो विधि की घोषणा करता है और किसी भी बच्चे के घटक पर नहीं

— जीनवैलजेन सेप

Answer 3

बस अगर कोई इसे टाइपस्क्रिप्ट में करना चाहता है, तो इसका समाधान है

   @Watch('$route', { immediate: true, deep: true })
   onUrlChange(newVal: Route) {
      // Some action
    }

और हाँ, जैसा कि नीचे दिए गए @ कोड द्वारा बताया गया है, कृपया शामिल करना न भूलें

import { Watch } from 'vue-property-decorator';

संपादित करें: Alcalyn ने किसी भी उपयोग करने के बजाय रूट प्रकार का उपयोग करने का एक बहुत अच्छा बिंदु बनाया

import { Watch } from 'vue-property-decorator';    
import { Route } from 'vue-router';

Comments

आयात में शामिल करना न भूलें: import { Prop, Watch } from "vue-property-decorator";

— Coops

मुझे आखिरकार यह महसूस करने में घंटों लग गए कि, क्या कोई दस्तावेज है?

— अय्याश

इसी प्रकार के दस्तावेज़ मैं पा सकते हैं: router.vuejs.org/api/#the-route-object भी उपयोग करने के बजाय anyप्रकार, आप इंटरफ़ेस का उपयोग कर सकते हैं Routeसेimport { Route } from 'vue-router';

— Alcalyn

Answer 4

उपरोक्त प्रतिक्रियाएं बेहतर हैं, लेकिन सिर्फ पूर्णता के लिए, जब आप एक घटक में होते हैं, तो आप VueRouter के साथ इतिहास ऑब्जेक्ट तक पहुँच सकते हैं: यह। $ Router.history। इसका मतलब है कि हम बदलावों के साथ सुन सकते हैं:

this.$router.listen((newLocation) =>{console.log(newLocation);})

मुझे लगता है कि यह मुख्य रूप से उपयोगी है जब इसे इसके साथ उपयोग किया जाता है। $ राऊटर। समानांतर राऊटर.पैथ आप जांच सकते हैं कि मैं क्या कर रहा हूँ debugger

अपने कोड में निर्देश और क्रोम DevTools कंसोल के साथ खेलना शुरू करें।

Answer 5

गहरे विकल्प के साथ चौकीदार मेरे लिए काम नहीं किया।

इसके बजाय, मैं अपडेटेड () जीवन चक्र हुक का उपयोग करता हूं जो घटक के डेटा में हर बार निष्पादित हो जाता है। बस इसे वैसे ही इस्तेमाल करें जैसे आप माउंटेड () के साथ करते हैं ।

mounted() {
   /* to be executed when mounted */
},
updated() {
   console.log(this.$route)
}

अपने संदर्भ के लिए, प्रलेखन पर जाएँ ।

Answer 6

टाइपस्क्रिप्ट उपयोगकर्ता के लिए एक और समाधान:

import Vue from "vue";
import Component from "vue-class-component";

@Component({
  beforeRouteLeave(to, from, next) {
    // incase if you want to access `this`
    // const self = this as any;
    next();
  }
})

export default class ComponentName extends Vue {}