टैब के लिए vue-राउटर डिफ़ॉल्ट बाल मार्ग

Question

मैं 2 सूचियों वाले टैब वाले होमपेज रखने की कोशिश कर रहा हूं, डिफ़ॉल्ट रूप से 1 खुला है।

मैं निम्नलिखित मार्ग config, मैं नाम को आसान बनाने के

let routes = [{ 
    path: '/', 
    name: 'home', 
    component: require('./views/Home.vue'), 
    children: [{ 
     path: 'list1', 
     name: 'home.list1', 
     component: require('./views/List1.vue') 
    }, { 
     path: 'list2', 
     name: 'home.list2', 
     component: require('./views/List2.vue') 
    }] 
} 

./views/Home.vue अंदर बदल दिया है है मैं प्रत्येक टैब (बच्चे मार्ग) के लिए एक <router-view></router-view> 2 नीचे <router-link> रों है।

जब मैं ऐप रूट http://domain/ पर जाता हूं तो मैं list1 टैब को सक्रिय करना चाहता हूं। मैं वर्तमान में ऐसा करने का एकमात्र तरीका यह है कि यदि मैं http://domain/list1 पर जाता हूं।

मैं

children: [{ 
    path: '', 
    name: 'home.list1' 

की कोशिश की है और यह शुरू में अच्छी तरह से काम करता है, लेकिन अगर मैं http://domain/list2 दोनों मेरे टैब लिंक (रूटर-लिंक) सक्रिय राज्य है पर जाएँ।

JSFiddle जो मैं चलाने के लिए नहीं मिलता है लेकिन संदर्भ

के लिए मदद करता है वहाँ यह करने के लिए एक बेहतर समाधान है?

Answer 1

मुझे लगता है कि अगर अपने घर मार्ग नहीं है "/" ​​

routes: [ 
    { path: '/home', 
     name: 'home', 
     component: require('./views/home.vue') 
     children: [ 
      { path: '/', name: 'list1', component: list1 }, 
      { path: 'list2', name: 'list2', component: list2}, 
     ], 
    } 
] 

यह अपने प्रारंभिक के अंदर घर घटक और List1 घटक लोड होगा कि तुम क्या काम करता है करना चाहते हैं। तो फिर तुम उपयोगकर्ता रूटर लिंक List2 को एनएवी कर सकते हैं:

या, शायद मैं सवाल समझ में नहीं आता।

Answer 2

एक घटक (टैब) बनाने के लिए माता-पिता मार्ग पर जाकर पर डिफ़ॉल्ट दिखाई देते हैं, आप

निम्नलिखित Vue रूटर डॉक्स से एक उदाहरण है '' (खाली स्ट्रिंग) के रूप में एक पथ जोड़ने की जरूरत है

const router = new VueRouter({ 
    routes: [ 
    { 
     path: '/user/:id', component: User, 
     children: [ 
     // UserHome will be rendered inside User's <router-view> 
     // when /user/:id is matched 
     { path: '', component: UserHome }, 

     // ...other sub routes 
     ] 
    } 
    ] 
}) 

'/' का उपयोग न करें, इसे रूट रूट के रूप में माना जाएगा।