Vue Router

Что такое Vue Router

Vue Router — это официальная библиотека маршрутизации для Vue.js, которая позволяет создавать одностраничные приложения (SPA) с возможностью навигации между различными представлениями без перезагрузки страницы. Она управляет состоянием навигации и позволяет легко организовывать маршруты в приложении

Зачем нужен Vue Router в приложениях на Vue.js

Vue Router предоставляет мощные инструменты для управления навигацией в приложении. С его помощью можно:

• Создавать динамические маршруты
• Передавать параметры в маршруты
• Обрабатывать навигацию между страницами
• Реализовывать вложенные маршруты и редиректы

Установка и настройка

Установка Vue Router

Для установки Vue Router необходимо использовать npm. В терминале выполните следующую команду:

npm install vue-router

Основная конфигурация

После установки нужно настроить маршруты в вашем приложении. Для этого создайте файл router.js и определите маршруты:

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Пример: создание простого маршрута

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

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(router)
  .mount('#app')

Теперь, когда вы перейдете по адресу /about, будет отображаться компонент About.

Работа с параметрами маршрутов Vue Router

Использование параметров в маршрутах

Vue Router позволяет передавать параметры в маршруты, что делает ваше приложение более динамичным. Например, вы можете создать маршрут, который принимает идентификатор пользователя:

const routes = [
  { path: '/user/:id', component: User }
]

Пример: vue router link params

Чтобы создать ссылку на этот маршрут, используйте router-link:

<router-link :to="{ path: '/user/123' }">Перейти к пользователю 123</router-link>

Получение параметров в компоненте

В компоненте User.vue вы можете получить доступ к параметрам маршрута через this.$route.params:

<template>
  <div>
    <h1>Пользователь ID: {{ userId }}</h1>
  </div>
</template>

<script>
export default {
  computed: {
    userId() {
      return this.$route.params.id
    }
  }
}
</script>

Этот код отобразит ID пользователя, который был передан в URL. Например, если вы перейдете по /user/123, на экране отобразится «Пользователь ID: 123».

Эти три пункта предоставляют базовое понимание Vue Router, его установки и работы с параметрами маршрутов, что является важным для создания динамичных приложений на Vue.js

Навигация между маршрутами

Использование router.push()

router.push() позволяет программно навигировать между маршрутами в приложении. Это полезно, когда нужно изменить маршрут на основе действий пользователя

Пример:

<template>
  <button @click="goToHome">Go to Home</button>
</template>

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push({ name: 'Home' }); // Переход на маршрут с именем 'Home'
    }
  }
}
</script>

Использование <router-link>

<router-link> — это компонент, который позволяет создавать ссылки для навигации между маршрутами

Пример:

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

В этом примере создаются ссылки на главную страницу и страницу «О нас».

Обработка маршрутов

Проверка текущего маршрута

Можно использовать this.$route для получения информации о текущем маршруте, например, его параметрах или имени

Пример:

<template>
  <div>
    <h1>Current Route: {{ currentRoute }}</h1>
  </div>
</template>

<script>
export default {
  computed: {
    currentRoute() {
      return this.$route.name; // Получаем имя текущего маршрута
    }
  }
}
</script>

Использование beforeEach для навигационных охранников

beforeEach позволяет выполнять код перед переходом к новому маршруту, например, для проверки авторизации

Пример:

import router from './router'

router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // Здесь должна быть логика проверки авторизации
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'Login' }); // Переход на страницу логина, если пользователь не авторизован
  } else {
    next(); // Продолжить навигацию
  }
});

Работа с вложенными маршрутами

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

Вложенные маршруты позволяют создавать иерархию маршрутов, где один маршрут может содержать другие

Пример:

const routes = [
  {
    path: '/user',
    component: UserLayout,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'settings',
        component: UserSettings
      }
    ]
  }
];

В этом примере маршрут /user содержит вложенные маршруты /user/profile и /user/settings.

Использование детей маршрутов

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

Пример:

<template>
  <div>
    <h1>User Page</h1>
    <router-view></router-view> <!-- Здесь будут отображаться вложенные компоненты -->
  </div>
</template>

Редиректы и обработка 404

Настройка редиректов

Редиректы позволяют перенаправлять пользователей с одного маршрута на другой

Пример:

const routes = [
  {
    path: '/',
    redirect: '/home' // Перенаправление с главной страницы на '/home'
  },
  {
    path: '/home',
    component: Home
  }
];

Обработка 404 ошибок

Можно настроить маршрут для обработки несуществующих страниц.

Пример:

const routes = [
  // Другие маршруты
  {
    path: '*',
    component: NotFound // Компонент, отображаемый при 404
  }
];

В этом примере любой маршрут, который не соответствует существующим, будет перенаправлен на компонент NotFound

Использование маршрутов с Vue 3

Особенности работы с Vue 3 и Vue Router

Vue 3 предлагает улучшения, такие как Composition API, которые позволяют более гибко управлять состоянием и логикой компонентов. Vue Router также адаптирован для работы с новыми возможностями Vue 3

Пример: Настройка маршрутов в Vue 3

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Использование Vue Router с TypeScript

Vue Router поддерживает TypeScript, что позволяет разработчикам использовать типизацию для улучшения качества кода и предотвращения ошибок

Пример: Определение маршрутов с TypeScript

import { RouteRecordRaw } from 'vue-router'
import Home from './components/Home.vue'

const routes: Array<RouteRecordRaw> = [
  { path: '/', component: Home }
]

Дополнительные возможности

Использование middleware

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

Пример: Настройка middleware для проверки аутентификации

router.beforeEach((to, from, next) => {
  const isAuthenticated = false // Здесь должна быть ваша логика проверки
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ path: '/login' })
  } else {
    next()
  }
})

Работа с метаданными маршрутов

Метаданные позволяют добавлять дополнительные данные к маршрутам, такие как требования к аутентификации или заголовки страниц

Пример: Использование метаданных

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true }
  }
]

Использование регулярных выражений в маршрутах

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

Пример: Регулярное выражение для маршрута

const routes = [
  {
    path: '/user/:id(\\d+)', // Только числовые идентификаторы
    component: UserProfile
  }
]

Интерактивные примеры и проекты

Проектное обучение с использованием Vue Router

Создание реальных проектов помогает студентам закрепить знания. Например, можно разработать приложение для управления задачами с использованием Vue Router для навигации между страницами

Пример: Простое приложение для управления задачами

• Главная страница со списком задач
• Страница добавления новой задачи
• Страница редактирования задачи

Примеры реальных приложений с Vue Router

Vue RealWorld Example App

• Это полнофункциональное приложение, демонстрирующее использование Vue.js, Vuex, axios и других технологий.
• Оно служит хорошим примером для начинающих разработчиков, желающих изучить Vue.
• Репозиторий: GitHub

Vue3 RealWorld Example App

• Обновленная версия предыдущего примера, использующая Vue 3.
• Демонстрирует CRUD-операции, аутентификацию, маршрутизацию и пагинацию.
• Репозиторий: GitHub

Vue.js Router for Everyone

• Пример кода из курса по Vue Router.
• Показывает, как создавать мощные одностраничные приложения (SPA) с использованием Vue Router.
• Включает примеры создания маршрутов, ленивой загрузки, работы с параметрами и многое другое.
• Репозиторий: GitHub