Настройка Vue Router
Установите Vue Router и определите первые маршруты
«Настройка Vue Router» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.
Что такое Vue Router
Vue Router — официальная библиотека маршрутизации для Vue.
- Связывает адреса с компонентами
- Обеспечивает навигацию в одностраничном приложении без полной перезагрузки страницы
- Управляет историей, ссылками и параметрами
Установка Vue Router
Добавьте Vue Router в проект с помощью npm.
# Install Vue Router 4 (for Vue 3)
npm install vue-router
# Or have it added during npm create vue@latestСоздание компонентов маршрутов
Каждый маршрут отображает компонент. Начните с простых компонентов страниц.
<!-- Home.vue -->
<template>
<h1>Home Page</h1>
</template>
<!-- About.vue -->
<template>
<h1>About Page</h1>
</template>Определение массива маршрутов
Массив routes связывает пути с компонентами.
import Home from "./views/Home.vue"
import About from "./views/About.vue"
const routes = [
{ path: "/", component: Home },
{ path: "/about", component: About }
]createRouter
Функция createRouter создаёт маршрутизатор из маршрутов и режима истории.
import { createRouter, createWebHistory } from "vue-router"
const router = createRouter({
history: createWebHistory(),
routes
})
export default routercreateWebHistory
createWebHistory использует API истории HTML5 для создания понятных адресов, например /about.
- В адресе нет хэша
- Требуется настройка сервера, чтобы работали прямые переходы по вложенным адресам
- Альтернативный вариант — createWebHashHistory (/#/about)
Регистрация маршрутизатора
Подключите маршрутизатор к приложению с помощью app.use.
import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"
createApp(App)
.use(router)
.mount("#app")router-view
Компонент router-view — это место, где отображается компонент найденного маршрута.
<!-- App.vue -->
<template>
<nav>...</nav>
<router-view></router-view>
</template>
<!-- The current page renders here -->router-link
Для навигации используйте router-link, а не обычные якорные элементы. Это позволяет избежать полной перезагрузки страницы.
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
</template>Стилизация активной ссылки
router-link автоматически добавляет CSS-классы к активной ссылке.
- router-link-active для частичных совпадений
- router-link-exact-active для точных совпадений
Настройте эти классы, чтобы выделить текущую страницу.
Собираем всё вместе
Полный процесс:
- Определите маршруты, связывающие пути с компонентами
- Создайте маршрутизатор с помощью createRouter и createWebHistory
- Зарегистрируйте его через app.use(router)
- Разместите router-view и выполняйте навигацию с помощью router-link
Быстрая проверка
Проверьте, насколько хорошо Вы поняли настройку Vue Router.
Итоги: настройка Vue Router
Вы настроили маршрутизацию на стороне клиента:
- Установили её с помощью npm install vue-router
- Определили массив routes
- Создали маршрутизатор с помощью createRouter и createWebHistory
- Зарегистрировали его через app.use(router)
- Использовали router-view и router-link
Далее: вложенные и динамические маршруты.
Часто задаваемые вопросы
Урок «Настройка Vue Router» бесплатный?
Да — полный текст урока «Настройка Vue Router» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.
Чему я научусь в уроке «Настройка Vue Router»?
Установите Vue Router и определите первые маршруты Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «Настройка Vue Router»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка Vue Router
- Вложенные и динамические маршруты
- Навигационные охранники