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

Question

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

<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>

这给了我整个网站的两列：

• 左侧导航栏
• 右侧的“内容”列

在主要内容部分（通过router-view）显示的各种页面（但不是全部）也需要在主导航下方显示自己的子导航。不同的页面有不同的子导航，我不知道如何在 VueJS 中实现这一点。有什么想法吗？

Answer 1

有几种方法可以做到这一点。最简单的方法是在组件本身上包含 sub header nav 组件，但是您说上面不会改变，所以您需要将某种数据传递给 sub-nav-component 以让它知道要渲染什么。您可以做到这一点的一种方法是使用该路线。

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

在 router.js 中：

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

在标题组件上：

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

并且在header组件的html中：

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