如何使用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路由器

回答

相关问题