0Pricing
Vue Academy · Урок

Вложенные и динамические маршруты

Создавайте вложенные макеты и динамические параметры маршрутов

«Вложенные и динамические маршруты» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

За пределами статических маршрутов

Реальным приложениям нужны маршруты, которые передают данные и вкладываются в макеты.

  • Динамические сегменты извлекают такие значения, как идентификатор
  • Вложенные маршруты отображают дочерние маршруты внутри родительского
  • Именованные маршруты и программная навигация делают приложение гибче

Динамические сегменты маршрута

Двоеточие обозначает динамический сегмент, которому соответствует любое значение.

const routes = [
  { path: "/user/:id", component: UserProfile }
]

// Matches /user/1, /user/42, /user/abc

Доступ к route.params

Прочитайте извлечённое значение через route.params.

<script setup>
import { useRoute } from "vue-router"

const route = useRoute()
console.log(route.params.id)
</script>

Реакция на изменения параметров

Когда изменяется только параметр, например при переходе с /user/1 на /user/2, компонент переиспользуется. Наблюдайте за параметром, чтобы повторно загрузить данные.

import { watch } from "vue"
import { useRoute } from "vue-router"

const route = useRoute()
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

Несколько динамических сегментов

Маршруты могут содержать несколько динамических частей.

const routes = [
  { path: "/user/:userId/post/:postId", component: Post }
]

// route.params.userId and route.params.postId

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

Вложенные маршруты позволяют отображать дочерние маршруты внутри родительского компонента.

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

Вложенный router-view

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

<!-- UserLayout.vue -->
<template>
  <h1>User</h1>
  <router-view></router-view>
</template>

<!-- /user/1/profile renders Profile here -->

Именованные маршруты

Присвойте маршруту имя, чтобы обращаться к нему без жёстко заданного пути.

const routes = [
  {
    path: "/user/:id",
    name: "user",
    component: UserProfile
  }
]

Ссылки по имени

router-link может указывать на именованный маршрут и передавать параметры в виде объекта.

<router-link
  :to="{ name: 'user', params: { id: 42 } }"
>
  View User
</router-link>

Программная навигация

Выполняйте навигацию из JavaScript с помощью метода push маршрутизатора.

import { useRouter } from "vue-router"

const router = useRouter()

function goToUser(id) {
  router.push({ name: "user", params: { id } })
}

Другие методы навигации

Маршрутизатор предоставляет дополнительные средства навигации:

  • router.push добавляет новую запись в историю
  • router.replace выполняет переход без добавления новой записи в историю
  • router.back возвращает на предыдущую страницу

Быстрая проверка

Проверьте, насколько хорошо Вы поняли динамические и вложенные маршруты.

Итоги: вложенные и динамические маршруты

Вы изучили расширенные возможности маршрутизации:

  • Динамические сегменты (/user/:id) сохраняются в route.params
  • Вложенные маршруты задаются через children и вложенный router-view
  • Именованные маршруты позволяют создавать ссылки по имени
  • router.push выполняет программную навигацию

Далее: защитники навигации.

Часто задаваемые вопросы

Урок «Вложенные и динамические маршруты» бесплатный?

Да — полный текст урока «Вложенные и динамические маршруты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Вложенные и динамические маршруты»?

Создавайте вложенные макеты и динамические параметры маршрутов Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Вложенные и динамические маршруты»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Настройка Vue Router
  2. Вложенные и динамические маршруты
  3. Навигационные охранники
← Назад к Vue Academy