javascript 在 Vue.js 中如何使用多个路由器视图，其中一个在另一个组件中？

In Vue.js how to use multiple router-views one of which is inside another component?

提问by wrahim

I have a Vue.js single page application where there is a main navbar that uses <router-view/>to render different pages.

我有一个 Vue.js 单页应用程序，其中有一个<router-view/>用于呈现不同页面的主导航栏。

Something like this:

像这样的东西：

<main-header/> <!-- navigation links -->
<transition name="slide-fade" mode="out-in">
  <router-view/> <!-- different pages -->
</transition>

In one of those pages I have a sidebar that has more navigation links (that are using <router-link/>just like the main navbar.

在其中一个页面中，我有一个侧边栏，其中包含更多导航链接（<router-link/>就像主导航栏一样使用。

Something like this:

像这样的东西：

<sidebar/> <!-- navigation links -->
<div class="content">
  <transition name="slide-fade" mode="out-in">
    <router-view/> <!-- content beside the sidebar -->
  </transition>
</div>

When I click on the sidebar navigation links I want the content beside the sidebar to change as well as the url to change. However, I lose the sidebar, and just get the component that is to be rendered in the content section.

当我点击侧边栏导航链接时，我希望侧边栏旁边的内容以及 url 发生变化。但是，我丢失了侧边栏，只获得了要在内容部分呈现的组件。

How do I achieve the desired result? How do I use multiple <router-view/>s one of which is inside another component, like the example above?

我如何达到预期的结果？如何使用多个<router-view/>s，其中一个在另一个组件内，如上面的示例？

回答by Tuan Pham

You need to use named views. Provide the nameattribute to the view.

您需要使用named views. 为name视图提供属性。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>

And configure them like

并像这样配置它们

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar
      }
    }
  ]
})

Please refer to the official docs.

请参考官方文档。

回答by adoug

The reason the sidebar disappeared is all the components are rendered in the first <router-view>besides the <main-header>.

侧边栏消失的原因是<router-view>除了<main-header>.

You should use the nested router by configuring childrenin the sidebar router like:

您应该通过children在侧边栏路由器中进行配置来使用嵌套路由器，例如：

const router = new VueRouter({
  routes: [
    { path: '/your-sidebar-url', component: your-sidebar-page,
      children: [
        {
          // A will be rendered in the second <router-view>
          // when /your-sidebar-url/a is matched
          path: 'a',
          component: A
        },
        {
          // B will be rendered in the second <router-view>
          // when /your-sidebar-url/b is matched
          path: 'b',
          component: B
        }
      ]
    }
  ]
})

More info in nested routes

嵌套路由中的更多信息

回答by Jose Seie

@adoug answer helped me.

@adoug 的回答帮助了我。

But in my case, I had named both router-view:

但就我而言，我已将两个路由器视图命名为：

I did this to fix it:

我这样做是为了修复它：

<router-view name='a'/>
<router-view name='b'/>

You have , somewhere inside you FatherComponent.vuemounted in ayou have a second

你有，在你内心的某个地方FatherComponent.vue，a你有一秒钟

I did this, to fix it:

我这样做了，以修复它：

const router = new VueRouter({
    routes: [
        { path: '/your-sidebar-url',
            components: {
                a: FatherComponent //you sidebar main component in 'a' name of routed-view
            },
            children: [
                {
                    // A will be rendered in the second <router-view>
                    // when /your-sidebar-url/a is matched
                    path: '/child-path/a',
                    components: {
                        b: ChildComponentA //note that 'b' is the name of child router view
                    }
                },
                {
                    // B will be rendered in the second <router-view>
                    // when /your-sidebar-url/b is matched
                    path: '/child-path/b',
                    components: {
                        b: ChildComponentB //note that 'b' is the name of child router view
                    }
                }
            ]
        }
    ]
})