Vue Router

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

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

Для начала необходимо установить Vue Router:

npm install vue-router@4

Создается файл маршрутов, обычно router/index.js:

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

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

Затем подключаем маршрутизатор в основной файл приложения main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

Создание навигации с Element Plus

Для создания навигационного меню удобно использовать компонент el-menu. Он позволяет интегрировать маршруты с визуальными элементами интерфейса.

Ключевые моменты:

  • Атрибут router на el-menu автоматически связывает элементы меню с маршрутами.
  • index элемента меню должен совпадать с path маршрута.
  • Использование el-sub-menu позволяет создавать вложенные навигационные структуры.

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

Vue Router поддерживает динамические сегменты маршрута с параметрами. Это важно для страниц деталей, профилей или товаров.

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('@/views/User.vue')
  }
]

В компоненте User.vue можно получить параметр через useRoute():

Навигация программно

Для перехода между маршрутами в коде используется useRouter():

Особенности Element Plus при программной навигации:

  • Компоненты el-button и el-link отлично сочетаются с методами маршрутизатора.
  • Поддержка динамического изменения активного состояния меню при программной навигации.

Ленивая загрузка компонентов

Для улучшения производительности рекомендуется использовать динамический импорт компонентов маршрутов:

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/Dashboard.vue')
  }
]

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

Защита маршрутов и навигационные охранники

Vue Router позволяет реализовать проверку доступа к страницам через navigation guards:

router.beforeEach((to, from, next) => {
  const isAuthenticated = Boolean(localStorage.getItem('token'))
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'Login' })
  } else {
    next()
  }
})

Для интеграции с Element Plus можно отображать уведомления о запрете доступа через ElMessage:

import { ElMessage } from 'element-plus'

router.beforeEach((to, from, next) => {
  const isAuthenticated = Boolean(localStorage.getItem('token'))
  if (to.meta.requiresAuth && !isAuthenticated) {
    ElMessage.warning('Необходимо авторизоваться')
    next({ name: 'Login' })
  } else {
    next()
  }
})

Роуты с вложенной структурой

Element Plus и Vue Router позволяют строить сложные интерфейсы с несколькими уровнями вложенности.

const routes = [
  {
    path: '/settings',
    component: () => import('@/layouts/SettingsLayout.vue'),
    children: [
      {
        path: 'profile',
        name: 'ProfileSettings',
        component: () => import('@/views/settings/Profile.vue')
      },
      {
        path: 'security',
        name: 'SecuritySettings',
        component: () => import('@/views/settings/Security.vue')
      }
    ]
  }
]

В SettingsLayout.vue можно разместить el-menu для управления подмаршрутами.

Интеграция с BreadCrumbs

Для отображения хлебных крошек используется el-breadcrumb:

Преимущества:

  • Автоматическая навигация по иерархии страниц.
  • Поддержка динамических маршрутов и отображения параметров.
Оглавление