2016-03-20 17 views
8

Sto cercando di creare un menu semplice usando router vue, id come iterarte tutti i percorsi e visualizzare nel mio menu, attualmente sto usando il metodo sotto nel mio componente ma ho appena ottenuto una funzione, come sarebbe ho iterato per ottenere percorsi individuali?ottieni tutti i percorsi in un router vue

methods : { 
getMenuLinks: function() { 

     var t = this.$router.map() ; 
     //t returns a vue object instance 
     return t._children ; 
     // did not know how to iterate this 
    } 

} 

voglio iterare tutte le rotte MAPED per ottenere qualcosa di simile al di sotto di ogni percorso mappato:

<a v-link="{ path: 'home' }">Home</a> 

risposta

10

In Nuxt, i percorsi vengono generati automaticamente quindi non ho potuto fare quello che @zxzak suggerito.

Ecco cosa si può fare in questo caso.

<template v-for="item in items"> 
    <b-nav-item :to="item.path"> 
     {{item.name}} 
    </b-nav-item> 
</template> 
export default { 
    created() { 
     this.$router.options.routes.forEach(route => { 
      this.items.push({ 
       name: route.name 
       , path: route.path 
      }) 
     }) 
    } 
    , data() { 
     return { 
      items: [] 
     } 
    } 
} 
+0

Grazie per la risposta, in realtà c'era un bug nel router vue-1 questo mi ha fatto postare questo ... vedi data, comunque grazie per la logica della soluzione, complimenti. –

+2

Dov'è il documento ufficiale di '$ router.options.routes'? – vikyd

4

Invece di inoltro sul interni di Vue, mettere percorsi all'interno dei dati del componente di partenza.

var map = { 
    '/foo': { 
    component: Foo 
    }, 
    '/bar': { 
    component: Bar 
    } 
} 

var routes = Object.keys(map) 

var App = Vue.extend({ 
    data: function() { 
    return { 
     routes: routes 
    } 
    } 
}) 

router.map(map) 
router.start(App, '#app') 

http://jsfiddle.net/xyu276sa/380/

+0

molto bene il pensiero! –

+0

ma come potrei iterare i percorsi? –

+1

controlla il jsfiddle aggiornato – zxzak

Problemi correlati