Получить все маршруты в маршрутизаторе vue

Пытаюсь создать простое меню, используя vue router, мне нравится перебирать все маршруты и отображать в моем меню, в настоящее время я использую метод экземпляра ниже в моем компоненте, но я просто получаю функцию, как бы я перебрал для получения отдельных маршрутов?

methods : {
 getMenuLinks: function() {

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

 }

Я хочу перебрать все отображенные маршруты, чтобы получить что-то вроде ниже каждого отображенного маршрута:

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

Ответы

Ответ 1

В Nuxt маршруты генерируются автоматически, поэтому я не мог сделать то, что предложил @zxzak.

Вот что вы можете сделать в этом случае.

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

Ответ 2

Вы можете просто перебрать $router.options.route в своем шаблоне:

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

Возможно, добавим стили для выбранного маршрута:

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

изменение: для активного класса используйте вместо него https://router.vuejs.org/api/#active-class instead

Ответ 3

Вместо ретрансляции на внутренних компонентах Vue поместите маршруты внутри данных вашего исходного компонента.

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/

Ответ 4

Другое решение - использовать Webpack require.context

// search for src/pages/**/index.vue
function routesGen () {
  const pages = require.context('./pages/', true, /index\.vue$/)
  const filePaths = pages.keys()
  const getRoutePath = filePath => filePath.match(/\.(\/\S+)\/index\.vue/)[1]
  return filePaths.map(filePath => ({
    path: getRoutePath(filePath),
    component: pages(filePath).default
  }))
}