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 中还描述了更复杂的布局。

vue-router：如何在多个元素中使用 view-router？

vue-router: How to use view-router in more than one element?

vue.js

vue-router