VueJS - 路由器视图之外的子导航组件? [英] VueJS - sub-nav components outside of router-view?

问题描述

我有一个使用 Bootstrap 的网站布局，如下所示(它需要保持这样):

<div class='col-md-2'><main-nav-component></main-nav-component><sub-nav-component></sub-nav-component><!-- 问题区域-->
<路由器视图></路由器视图><!-- 主要内容部分-->

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

• 左侧的导航栏
• 右侧的内容"列

在主要内容部分(通过router-view)显示的各种页面(但不是全部)也需要在主导航下方显示自己的子导航.不同的页面有不同的子导航，我不知道如何在 VueJS 中完成它.有什么想法吗?

解决方案

有几种方法可以做到这一点.最简单的就是在组件本身上包含子头导航组件，但是你说上面不会改变，所以你需要传递某种数据给子导航组件，让它知道要渲染什么.一种方法是使用路由.

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

在 router.js 中:

<代码>{路径:'/个人资料/用户'，name: '个人资料',组件:配置文件，元:{区域:'个人资料'}},

关于标题组件:

 计算:{区(){返回 this.$store.state.route.meta.zone},

在header组件的html中:

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

I have a site layout using Bootstrap as follows (and it needs to stay like this):

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

This gives me two columns across the whole site:

• A navigation column on the left
• A "contents" column on the right

Various pages (but not all) that are displayed in the main content section (via the router-view) also need to display their own sub-nav below the main nav. There are different sub-navs for different pages and I can't figure out how to accomplish this in VueJS. Any ideas?

解决方案

There's a couple ways of doing this. The easiest is to include the sub header nav components on the components themselves, but you said the above will not change, so instead, you need to pass some kind of data to the sub-nav-component to let it know what to render. One way you can do this is to use the route.

For example, in one application we needed to have a specific sub nav for a group of pages. We have declared a 'zone' in meta, then in the header component we read the zone and display the proper sub-nav for it.

In the router.js:

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

On the header component:

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

And in the html of the header component:

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

这篇关于VueJS - 路由器视图之外的子导航组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！