VueJS - 路由器视图外的子导航组件？

问题描述：

我有使用引导如下站点布局（它需要保持这样的）：VueJS - 路由器视图外的子导航组件？

<div class='row'> 
    <div class='col-md-2'> 
    <main-nav-component></main-nav-component> 
    <sub-nav-component></sub-nav-component> <!-- Problem Area --> 
    </div> 

    <div class='col-md-10'> 
    <router-view></router-view> <!-- MAIN CONTENT SECTION --> 
    </div> 
</div>

这给了我整个网站两列：

导航栏左侧右侧
A“内容”列

各种页面（但不是全部），其经由01显示在主要内容部分（）也需要在主导航下面显示自己的子导航。对于不同的页面有不同的子导航，我不知道如何在VueJS中完成这个。有任何想法吗？

答

有几种方法可以做到这一点。最简单的方法是在组件本身中包含子标题导航组件，但是您说上述内容不会改变，所以您需要将某种数据传递给子导航组件，让它知道要呈现的内容。你可以做的一种方法是使用路线。

例如，在一个应用程序中，我们需要为一组页面提供特定的子导航。我们已经在meta中声明了一个“区域”，然后在标题组件中，我们读取了该区域并显示适当的子导航。

在router.js：

{ 
    path: '/profile/user', 
    name: 'Profile', 
    component: Profile, 
    meta: { zone: 'profile'} 
},

页眉部分：

computed: { 
    zone(){ 
     return this.$store.state.route.meta.zone 
    },

而在头组件的HTML：

<profile-nav v-if="zone == 'profile'"></profile-nav>

它看起来像你只有在'zone == profile'时才显示'profile-nav'组件。但是如果你想展示完全不同的组件，那么呢？你只是在该标题区域列出一大堆组件，并为每个组件做类似的'v-if ='区域== someOtherComponent''？ – Garfonzo

这工作完美。现在，在每个'router'项目中，我有一个名为'subNavComponent'的'meta'字段，并为其指定我想要的sub-nav的值，如'building-sub-nav'或'contact-sub-nav'。然后，在我的'App.vue'中，我有''这是一个计算值，它返回存储在该路由器对象的'meta'中的值，或者返回一个空字符串。完全按照我的希望工作！谢谢:) – Garfonzo

去@Garfonzo！干得不错！ –

VueJS - 路由器视图外的子导航组件？

相关推荐