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

Question

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

类似这样的：

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

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

类似这样的：

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

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

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

Answer 1

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

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

并像配置它们一样

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

请参考official docs。

Answer 2

侧边栏消失的原因是除了<main-header>之外，所有组件都呈现在第一个<router-view>中。

您应该通过在侧边栏路由器中配置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
        }
      ]
    }
  ]
})

更多信息nested routes

Answer 3

@adoug 的回答帮助了我。

但在我的例子中，我将两个路由器视图都命名为：

我这样做是为了修复它：

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

你有，你内心的某个地方FatherComponent.vue安装在a你有第二个

我这样做是为了修复它：

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
                    }
                }
            ]
        }
    ]
})

Answer 4

命名路线视图

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/',
      // a single route can define multiple named components
      // which will be rendered into <router-view>s with corresponding names.
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    },
    {
      path: '/other',
      components: {
        default: Baz,
        a: Bar,
        b: Foo
      }
    }
  ]
})

new Vue({
    router,
  el: '#app'
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Named Views</h1>
  <ul>
    <li>
      <router-link to="/">/</router-link>
    </li>
    <li>
      <router-link to="/other">/other</router-link>
    </li>
  </ul>
  <router-view class="view one"></router-view>
  <router-view class="view two" name="a"></router-view>
  <router-view class="view three" name="b"></router-view>
</div>

https://router.vuejs.org/guide/essentials/named-views.html#nested-named-views