2016-11-03 12 views
10

के साथ पैराम पर प्रतिक्रिया के लिए सर्वोत्तम अभ्यास /foo/:val जैसे मार्गों के साथ वू राउटर का उपयोग करते समय आपको react for parameter changes पर एक वॉचर जोड़ना होगा। इसके परिणामस्वरूप यूआरएल में पैरामीटर वाले सभी विचारों में कुछ हद तक कष्टप्रद डुप्लिकेट कोड होता है।व्यू राउटर

यह निम्न उदाहरण की तरह लग सकता है:

export default { 
    // [...] 
    created() { 
     doSomething.call(this); 
    }, 
    watch: { 
     '$route'() { 
      doSomething.call(this); 
     } 
    }, 
} 

function doSomething() { 
    // e.g. request API, assign view properties, ... 
} 

उस पर काबू पाने के लिए किसी भी अन्य रास्ता नहीं है? created और $route परिवर्तनों के लिए हैंडलर संयुक्त हो सकते हैं? क्या घटक का पुन: उपयोग अक्षम किया जा सकता है ताकि वॉचर बिल्कुल आवश्यक न हो? मैं वू 2 का उपयोग कर रहा हूं, लेकिन यह भी वू 1 के लिए दिलचस्प हो सकता है।

+0

हम्म। V1 राउटर में एक कर सकते थे लेकिन मुझे यह नहीं लगता कि v2 में। दिलचस्प। – ceejayoz

+1

@ceejayoz आप सही हैं, यह वहां था लेकिन [हटा दिया गया है] (https://vuejs.org/guide/migration-vue-router.html#canReuse-false-removed)। – str

+0

ठीक है,! इस सवाल को तारांकित करना – ceejayoz

उत्तर

13

एक संभावित उत्तर जिसे मैंने अभी पाया है GitHub issue के लिए धन्यवाद निम्नलिखित है।

key attribute का उपयोग करना संभव है जिसका उपयोग v-for के लिए भी किया जाता है ताकि दृश्य में दृश्य ट्रैक परिवर्तन हो सके। कि काम करने के लिए के लिए, आप router-view तत्व को विशेषता जोड़ने के लिए है:

<router-view :key="$route.fullPath"></router-view> 

आप दृश्य में जोड़ने के बाद, आप अब और $route देखने की जरूरत नहीं है। इसके बजाए, Vue.js घटक का एक बिल्कुल नया उदाहरण तैयार करेगा और created कॉलबैक भी कॉल करेगा।

हालांकि, यह एक सब कुछ या कुछ भी समाधान नहीं है। ऐसा लगता है कि मैं वर्तमान में विकास कर रहा हूं कि छोटे आवेदन पर अच्छी तरह से काम करता है। लेकिन इसका प्रदर्शन किसी अन्य एप्लिकेशन में प्रदर्शन पर हो सकता है। यदि आप वास्तव में केवल कुछ मार्गों के लिए दृश्य का पुन: उपयोग अक्षम करना चाहते हैं, तो आप key के मान based on the route को सेट करने पर एक नज़र डाल सकते हैं। लेकिन मुझे वास्तव में उस दृष्टिकोण को पसंद नहीं है।

+0

यह काम करता है धन्यवाद, हालांकि मेरे पास इन रूटेड घटकों के अंदर बाल घटक हैं और वे संरक्षित नहीं हैं। मैं देखता हूं कि वे हर बार घुड़सवार घटनाओं को उत्सर्जित कर रहे हैं जब मैं दो रूट वाले घटकों के बीच स्विच करता हूं जो अलग-अलग घुड़सवार होते हैं और केवल एक बार। क्या उनके बच्चे के घटकों को भी जिंदा रखने का कोई तरीका है? सभी बच्चों को एक पर काटता है, भले ही मैं एक कुंजी का उपयोग करता हूं। – okwme