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

我有一个使用Bootstrap的站点布局，如下所示（它需要保持这样）：

这为我提供了整个网站的两个专栏：

• 左边的导航栏
• 右边有一个“目录”栏

---

主内容部分中显示的各种页面（但不是所有页面）（通过

路由器视图

）也需要在主导航下方显示它们自己的子导航。不同的页面有不同的子导航，我不知道如何在VueJS中实现这一点。有什么想法吗？

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

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

在router.js中：

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

在标题组件上：

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

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

在标题组件的html中：

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

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

仅当

zone==profile

时，才显示

profile nav

组件。但是如果你想展示完全不同的组件呢？您是否只需在标题区域列出一大堆组件，并对每个组件执行类似的

v-if='zone==someOtherComponent'

。现在，在每个

路由器

项目上，我都有一个名为

subNavComponent

的

meta

字段，并给它我想要的子导航值，比如

构建子导航

或

联系子导航

。然后，在我的

App.vue

中，我有

，这是一个计算值，它要么返回存储在该路由器对象的

meta

中的值，要么返回一个空字符串。正如我所希望的那样工作！谢谢：）