Вложенные маршруты

Интерфейсы некоторых приложений состоят из компонентов, вложенных на несколько уровней. В этом случае часто сегменты URL соответствуют определённой структуре вложенных компонентов, например:

/user/johnny/profile                     /user/johnny/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

С Vue Router вы можете выразить эту связь с помощью конфигурации вложенных маршрутов.

Учитывая приложение, созданное в предыдущей главе:

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

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
}

// these are passed to `createRouter`
const routes = [{ path: '/user/:id', component: User }]

Здесь <router-view> является верхнеуровневым router-view. Он отображает компонент, соответствующий верхнеуровневому маршруту. Аналогично, отображаемый компонент также может содержать собственные, вложенные <router-view>. Например, если мы добавим один внутри шаблона компонента User:

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `,
}

Чтобы отобразить компоненты в этот вложенный router-view, необходимо использовать опцию children в любом из маршрутов:

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // UserProfile will be rendered inside User's <router-view>
        // when /user/:id/profile is matched
        path: 'profile',
        component: UserProfile,
      },
      {
        // UserPosts will be rendered inside User's <router-view>
        // when /user/:id/posts is matched
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]

Обратите внимание, что вложенные пути, начинающиеся с /, будут обрабатываться как корневой путь. Это позволяет использовать вложенность компонентов без необходимости использования вложенного URL.

Как видите, опция children — это просто ещё один массив маршрутов, как и сам routes. Таким образом, вы можете продолжать вкладывать представления столько, сколько нужно.

В данный момент, с указанной конфигурацией, при посещении /user/eduardo, ничего не будет отображено внутри User's router-view, так как не соответствует ни один вложенный маршрут. Возможно, вы захотите отобразить что-то там. В этом случае вы можете предоставить пустой вложенный путь:

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      // UserHome will be rendered inside User's <router-view>
      // when /user/:id is matched
      { path: '', component: UserHome },

      // ...other sub routes
    ],
  },
]

Рабочий демонстрационный пример этого примера можно найти здесь.