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

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

例如，在一个应用程序中，我们需要为一组页面设置特定的子导航。我们在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>

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

1 个答案: