Vue Router интеграция

Для полноценной интеграции Naive UI с маршрутизацией на Vue 3 требуется подключение пакета vue-router. Установка осуществляется через npm или yarn:

npm install vue-router
# или
yarn add vue-router

После установки необходимо создать файл конфигурации маршрутов, например 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(),
  routes
})

export default router

В main.js подключается роутер:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import naive from 'naive-ui'

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

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

Многие компоненты Naive UI, такие как NButton, NMenu, NBreadcrumb, поддерживают навигацию через роутер. Для этого используется проп to и опция router.

Пример кнопки с маршрутизацией

<template>
  <n-button type="primary" :to="{ name: 'About' }" router>
    Перейти на About
  </n-button>
</template>

В этом примере кнопка автоматически использует router-link, что позволяет изменять маршруты без перезагрузки страницы.

Навигация через NMenu

Компонент NMenu позволяет создавать боковые и верхние меню с динамической навигацией:

<template>
  <n-menu :options="menuOptions" mode="horizontal" />
</template>

<script>
export default {
  data() {
    return {
      menuOptions: [
        { label: 'Главная', key: '/', to: { name: 'Home' }, router: true },
        { label: 'О проекте', key: '/about', to: { name: 'About' }, router: true }
      ]
    }
  }
}
</script>

Использование пропсов to и router: true автоматически интегрирует элементы меню с Vue Router, обеспечивая плавную навигацию без перезагрузки страницы.

Навигационные хуки и динамическое обновление состояния компонентов

Vue Router предоставляет хуки для слежения за изменениями маршрута, что полезно для компонентов Naive UI, которые зависят от текущего маршрута, например, NMenu или NBreadcrumb:

import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'

export default {
  setup() {
    const route = useRoute()
    const activeKey = ref(route.path)

    watch(route, (newRoute) => {
      activeKey.value = newRoute.path
    })

    return { activeKey }
  }
}

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

Интеграция NBreadcrumb с Vue Router

Компонент NBreadcrumb идеально подходит для отображения текущей навигации по маршрутам:

<template>
  <n-breadcrumb>
    <n-breadcrumb-item v-for="item in breadcrumbItems" :key="item.path">
      <router-link :to="item.path">{{ item.label }}</router-link>
    </n-breadcrumb-item>
  </n-breadcrumb>
</template>

<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const breadcrumbItems = computed(() => {
      const paths = route.path.split('/').filter(Boolean)
      return paths.map((segment, index) => ({
        path: '/' + paths.slice(0, index + 1).join('/'),
        label: segment
      }))
    })
    return { breadcrumbItems }
  }
}
</script>

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

Lazy Loading маршрутов и оптимизация производительности

Для больших проектов рекомендуется использовать ленивую загрузку компонентов, чтобы уменьшить размер основной сборки:

const Home = () => import('../views/Home.vue')
const About = () => import('../views/About.vue')

При таком подходе компоненты будут загружаться только при необходимости, что снижает время первоначальной загрузки приложения. Компоненты Naive UI полностью совместимы с этим методом, что позволяет комбинировать визуальные элементы и динамическую маршрутизацию без проблем.

Динамическая маршрутизация для компонентов Naive UI

Иногда необходимо генерировать меню или страницы на основе данных с сервера:

const menuData = [
  { name: 'Dashboard', path: '/dashboard' },
  { name: 'Profile', path: '/profile' }
]

const routes = menuData.map(item => ({
  path: item.path,
  name: item.name,
  component: () => import(`../views${item.path}.vue`)
}))

Комбинация динамического формирования маршрутов и компонентов Naive UI позволяет создавать полностью настраиваемые интерфейсы с поддержкой Vue Router, при этом упрощается поддержка и расширение проекта.

Использование Router-guards с Naive UI

Для защиты маршрутов и реализации контроля доступа применяются navigation guards:

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

Компоненты Naive UI, такие как NButton и NMenu, при этом корректно обновляют визуальное состояние, соответствуя правилам маршрутизации и обеспечивая согласованность интерфейса.

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

  • Использовать проп to и router: true для компонентов Naive UI при навигации.
  • Поддерживать динамическое обновление активного состояния меню и хлебных крошек через useRoute и watch.
  • Применять ленивую загрузку компонентов для оптимизации производительности.
  • Комбинировать статические и динамические маршруты для гибкого управления интерфейсом.
  • Обеспечивать защиту маршрутов через navigation guards, сохраняя корректное отображение компонентов Naive UI.

Эти подходы создают мощную и гибкую связку Naive UI + Vue Router, позволяя строить современный интерфейс с плавной навигацией и управлением состоянием.

Оглавление