vue.js - vue-router:如何在多个元素中使用 view-router？

Question

在模板中使用 vue-router 的一个非常简单的例子是下面的代码:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

我的理解是router-view的内容会被相关组件切换到path中。

但是，如果我有一个模板，其中包含多个受路由器影响的元素。例如，

<template>
  <div id="app">
   <h1> header </h1>
    <router-view 1/>
    <h1> Inner </h1>
    <router-view 2/>
    <h1> Footer </h1>
  </div>
</template>

假设 router-view 1 和 router-view 2 都可以根据路径获取不同的组件。

在这种情况下，你会推荐我如何使用路由器？

Answer 1

基于 official doc , 你必须使用 named-views。

像那样，您可以让多个 router-view 为同一路径呈现不同的组件。

以你的例子，它变成了:

<template>
  <div id="app">
   <h1> header </h1>
    <router-view /> // this will be the default
    <h1> Inner </h1>
    <router-view name="inner"/>
    <h1> Footer </h1>
  </div>
</template>

你的路由器看起来像:

// Don't forget your imports
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: HeaderComponent, // Will render in default router-view
        inner: InnerComponent // Will render in router-view named "inner"
      }
    }
  ]
})

official doc 中还描述了更复杂的布局.