Question

在模板中使用vue-router的一个非常简单的示例是以下代码：

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

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

我了解的是，路由器视图的内容将由相关组件切换到路径。

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

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

1 个答案: