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>

这让我在整个网站上有两个栏目：

左侧导航栏
右侧"contents"列

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

Answer 1

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

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

在router.js中：

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

在 header 组件上：

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

并且在 header 组件的 html 中：

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

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

VueJS - sub-nav components outside of router-view?

vue-router

vuejs2