2016-03-20 126 views
8

正在嘗試使用vue路由器創建一個簡單的菜單,id喜歡迭代所有路由並顯示在我的菜單中,目前我正在使用下面的方法在我的組件中,但我只是得到一個函數,怎麼會我迭代獲取個人路線?在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 
    } 

} 

我想要遍歷所有馬培德途徑獲得類似下面每個映射的路線:

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

回答

10

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

我們如何得到路由名稱感謝您的答案,實際上有vue-1路由器中的錯誤這讓我發佈這個...看日期,無論如何感謝解決方案的邏輯,榮譽。 –

+2

'$ router.options.routes'官方文檔在哪裏? – vikyd

4

而是中繼上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/

+0

非常善於思考! –

+0

但我將如何迭代路線? –

+1

查看更新的jsfiddle – zxzak