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

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

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

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

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

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

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

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

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

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

Чтобы отобразить компоненты в этот вложенный выходной узел, нам нужно использовать параметр children в конфигурации конструктора VueRouter:

const router = new VueRouter({
  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/foo, ничего не будет отображаться внутри выходного узла User, потому что ни один дочерний маршрут не соответствует. Возможно, вы захотите отобразить что-то там. В таком случае вы можете предоставить пустой дочерний маршрут:

const router = new VueRouter({
  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
      ]
    }
  ]
})

Демонстрационную версию этого примера можно найти здесь.