如何使用VUE路由器

使用計算的屬性在孩子的Vue組件考慮的計算性能：如何使用VUE路由器

computed: { 
menuItems(){ 
    let menuItems = [ 
    {icon:'dashboard', title:'Home', link:'/'}, 
    {icon:'fa-code', title:'Code Portfolio', link:'/code'}, 
    {icon:'fa-rss', title:'Blog', link:'/'}, 
    {icon:'fa-info-circle', title:'About', link:'/'}, 
    {icon:'fa-envelope', title:'Contact', link:'/'}, 
    ] 
    return menuItems 
}}

使用VUE路由器，我怎麼通過這個陣列到子組件？

我已經試過宣佈在組件的道具並綁定到路由器鏈接：

組件：

props: ['menuItems']

家長：

<router-view :menuItems="menuItems"></router-view>

這是行不通的。我如何正確傳遞道具，或者有更好的方法來完成它。謝謝！

來源

2017-10-12 Doug E

可能'：menu-items =「menuItems」'取決於你的模板是如何定義的。如果它在DOM中，它需要烤肉串包裝。否則，這是別的。 – Bert

爲了說明問題，我使用的是計算屬性而不是數據屬性，因爲它稍後將與授權狀態進行交互。 –

@Bert，很好的建議。我錯過了。但仍然沒有工作。 –

你並不需要使用靜態數據的計算方法（或數據，一旦組件被創建，不會改變你可以簡單地使用該組件的數據屬性

然後。：你有什麼tryng做也許你需要一個菜單組件可以聲明你的應用程序（或主要成分）的模板，以這樣的方式？

<template> 
    <div id="app"> 
    <custom-menu></custom-menu> 
    <router-view></router-view> 
    </div> 
</template>

在您的自定義菜單組件，你可以處理你的菜單鏈接，如果他們根據路線變化

來源

2017-10-12 20:25:48 Radar155

哦謝謝你，我編輯它！ – Radar155

Thanks @ Radar155。一旦我稍後將其綁定到Auth狀態，它最終將成爲一個動態屬性。我需要這些項目來呈現除導航欄之外的其他內容。 –

您應該使用vuex將應用程序數據存儲在由所有組件共享的集中式存儲中。在這裏，您可以存儲身份驗證狀態，並且所有組件都會根據您的邏輯對更改做出反應。 – Radar155

我是st我不知道如何通過一個動態對象作爲道具，但我認爲我是在過度揣測整個事情。

從vue.js文檔：「人們經常忽視的是，真理在Vue公司應用程序的源是原始數據對象」

因爲我只是想獲得一個授權狀態向下傳遞全球到我的組件僅引用根數據實例是最簡單的。

因此，在任何組件，我需要那個數據我剛纔創建一個計算的屬性：

computed: { 
    user(){ 
     return this.$root.$data.user 
    } 
    }

在根數據是動態的，或者他們有很多vuex的偉大工程的全局數據的情況。我只是不想將它用於這個小型項目。

來源

2017-10-13 02:21:47

如何使用VUE路由器

回答

相關問題