vue-router: Как использовать view-router в нескольких элементах? - PullRequest
Новая
       6

vue-router: Как использовать view-router в нескольких элементах?

0 голосов
/ 19 декабря 2018

Очень простым примером использования vue-router в шаблоне является следующий код: 

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

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

Насколько я понимаю, что содержимое router-view будет переключаться соответствующим компонентом на путь.

Однако, если у меня есть шаблон с более чем одним элементом, затронутым маршрутизатором.Например, 

<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» оба могут получать разные компоненты в зависимости от пути.

В таком случае, как бы вы порекомендовали мне использовать роутер?

1 Ответ

0 голосов
/ 19 декабря 2018

Исходя из официального документа , вы должны использовать 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"
      }
    }
  ]
})

Более сложные макеты также описаны в официальном документе .

...