在vue路由器中获取所有路由

vue.js Vue.js

2020-03-11

我正在尝试使用vue路由器创建一个简单的菜单，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>

第843篇《在vue路由器中获取所有路由》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
逆天樱 2020.03.11

在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: []
        }
    }
}
A飞云 2020.03.11

您可以简单地$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代替

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android