vue.js - 获取vue路由器中的所有路由

Question

我正在尝试使用 vue router 创建一个简单的菜单，id 喜欢迭代所有路由并显示在我的菜单中，目前在我的组件中使用下面的实例方法但我只是得到一个函数，我将如何迭代以获取单独的路由？

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>

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