Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.

В этой статье мы рассмотрим, как определять вложенные маршруты с помощью Vue Router.

Зачем нужны вложенные маршруты?

Нам нужны вложенные маршруты для организации маршрутов, в которых компоненты вложены на многоуровневую глубину.

Например, нам нужно найти способ организовать такие маршруты, как:

/user/bar/profile                     
/user/bar/posts

в одно связное место.

Определение вложенных маршрутов

Мы можем определить вложенные маршруты, добавив массив children в запись маршрута, а затем в шаблоне родительского маршрута мы должны добавить router-view для отображения дочерних маршрутов.

Например, мы можем написать следующее:

src/index.js :

const Profile = { template: "<p>{{$route.params.user}}'s profile</p>" };
const Posts = { template: "<p>{{$route.params.user}}'s posts</p>" };
const User = {
  template: `
    <div>
      <p>user - {{$route.params.user}}</p>
      <router-view></router-view>
    </div>
`
};
const routes = [
  {
    path: "/user/:user",
    component: User,
    children: [
      { path: "posts", component: Posts },
      { path: "profile", component: Profile }
    ]
  }
];
const router = new VueRouter({
  routes
});
new Vue({
  el: "#app",
  router
});

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <router-link to="/user/foo">Foo User</router-link>
        <router-link to="/user/foo/posts">Foo Post</router-link>
        <router-link to="/user/foo/profile">Foo Profile</router-link>
      </div>
      <router-view></router-view>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

В приведенном выше коде мы имеем:

const routes = [
  {
    path: "/user/:user",
    component: User,
    children: [
      { path: "posts", component: Posts },
      { path: "profile", component: Profile }
    ]
  }
];

для определения дочерних маршрутов.

Компоненты Posts и Profile похожи на любые компоненты, которые мы определяли как обычно.

Однако компонент User имеет router-view для отображения содержимого компонентов Posts и Profile.

В шаблоне у нас есть 3 ссылки маршрутизатора для перехода к корневому и дочернему маршрутам:

<router-link to="/user/foo">Foo User</router-link>
<router-link to="/user/foo/posts">Foo Post</router-link>
<router-link to="/user/foo/profile">Foo Profile</router-link>

Тогда мы должны увидеть:

Foo User Foo Post Foo Profile
user - foo
foo's posts

когда мы переходим к /#/user/foo/posts или щелкаем по Foo Post.

И мы должны увидеть:

Foo User Foo Post Foo Profile
user - foo
foo's profile

когда мы переходим к /#/user/foo/profile или щелкаем по Foo Profile.

Когда мы переходим к /#/user/foo или щелкаем по Foo User, мы видим:

Foo User Foo Post Foo Profile
user - foo

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

Кроме того, родительский и дочерний маршруты имеют доступ к одним и тем же параметрам маршрута.

Например, мы можем добавить компонент UserHome и маршрут для него в приведенный выше пример следующим образом:

src/index.js :

const Profile = { template: "<p>{{$route.params.user}}'s profile</p>" };
const Posts = { template: "<p>{{$route.params.user}}'s posts</p>" };
const UserHome = { template: "<p>{{$route.params.user}} home</p>" };
const User = {
  template: `
    <div>
      <p>user - {{$route.params.user}}</p>
      <router-view></router-view>
    </div>
`
};
const routes = [
  {
    path: "/user/:user",
    component: User,
    children: [
      { path: "", component: UserHome },
      { path: "posts", component: Posts },
      { path: "profile", component: Profile }
    ]
  }
];
const router = new VueRouter({
  routes
});
new Vue({
  el: "#app",
  router
});

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <router-link to="/user/foo">Foo User</router-link>
        <router-link to="/user/foo/posts">Foo Post</router-link>
        <router-link to="/user/foo/profile">Foo Profile</router-link>
      </div>
      <router-view></router-view>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Теперь, когда мы переходим к /user/foo или щелкаем по Foo User, мы видим:

Foo User Foo Post Foo Profile
user - foo
foo home

Все остальное остается прежним.

Заключение

Мы можем добавить вложенные маршруты к нашим маршрутам, добавив свойство children с массивом маршрутов.

Затем мы должны добавить router-view к родительскому маршруту, чтобы мы могли видеть содержимое дочерних маршрутов.

Все родительский и дочерний маршруты имеют доступ к одним и тем же параметрам маршрута.

Примечание из JavaScript In Plain English

Мы запустили три новых издания! Проявите любовь к нашим новым публикациям, подписавшись на них: AI на простом английском, UX на простом английском, Python на простом английском - спасибо и продолжайте учиться!

Мы также всегда заинтересованы в продвижении качественного контента. Если у вас есть статья, которую вы хотели бы отправить в какую-либо из наших публикаций, отправьте нам электронное письмо по адресу [email protected] с вашим именем пользователя Medium, и мы добавим вас в качестве автора. Также сообщите нам, к каким публикациям вы хотите быть добавлены.