web-dev-qa-db-fra.com

obtenir toutes les routes dans un routeur vue

J'essaie de créer un menu simple en utilisant vue routeur, j'aimerais itérer toutes les routes et afficher dans mon menu, j'utilise actuellement la méthode d'instance ci-dessous dans mon composant mais je reçois juste une fonction, comment j'itère pour obtenir des itinéraires individuels?

methods : {
 getMenuLinks: function() {

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

 }

Je veux parcourir tous les itinéraires mappés pour obtenir quelque chose comme ci-dessous de chaque itinéraire mappé:

<a v-link="{ path: 'home' }">Home</a>
vue.jsvue-router
27
Jimmy Obonyo Abor

Dans Nuxt, les routes sont générées automatiquement, donc je n'ai pas pu faire ce que @zxzak a suggéré.

Voici ce que vous pouvez faire dans ce cas.

<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: []
        }
    }
}
32
Richard Ayotte

Au lieu de relayer sur les internes de Vue, placez des routes dans les données de votre composant de départ.

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/

5
zxzak

Vous pouvez simplement itérer sur $router.options.route dans votre modèle:

<nav>
  <router-link v-for="route in $router.options.routes" :key="route.path" :to="route.path">{{ route.name }}</router-link>
</nav>

Ajoutez peut-être un style à l'itinéraire sélectionné:

:class="{ active: route.path === $router.currentRoute.path }"

edit: pour la classe active, utilisez https://router.vuejs.org/api/#active-class à la place

4
Blauhirn