Анализ и мониторинг

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

npm install vue-router@next

После установки создается экземпляр маршрутизатора, который интегрируется с приложением Vue:

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;

В корневом файле приложения подключение маршрутизатора осуществляется через app.use(router).

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

Навигация может выполняться с помощью компонентов и методов экземпляра маршрутизатора:

О нас

Или программно:

router.push('/about');
router.replace('/about');
router.back();

Важно: push добавляет запись в историю браузера, replace заменяет текущую запись, а back возвращает на предыдущую страницу.

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

Маршруты могут содержать динамические сегменты, обозначаемые двоеточием:

{ path: '/user/:id', component: User }

Доступ к параметрам осуществляется через объект route:

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    console.log(route.params.id);
  }
};

Параметры можно отслеживать с помощью реактивных эффектов Vue для реактивного обновления компонента при смене маршрута.

Маршруты с именами

Именованные маршруты упрощают программную навигацию:

{ path: '/profile/:username', name: 'profile', component: Profile }

Навигация по имени:

router.push({ name: 'profile', params: { username: 'ivan' } });

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

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

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: 'stats', component: Stats },
      { path: 'settings', component: Settings }
    ]
  }
];

Переходы и навигационные охранники

Vue Router предоставляет навигационные охранники для контроля переходов:

  • Глобальные охранники:
router.beforeEach((to, from, next) => {
  if (!isAuthenticated && to.name !== 'login') {
    next({ name: 'login' });
  } else {
    next();
  }
});
  • Локальные охранники маршрута:
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => vm.fetchData(to.params.id));
  }
};
  • Охранники выхода из компонента:
beforeRouteLeave(to, from, next) {
  if (this.hasUnsavedChanges) {
    const confirmLeave = window.confirm('Есть несохраненные изменения. Выйти?');
    next(confirmLeave);
  } else {
    next();
  }
}

Асинхронные маршруты и ленивое подключение компонентов

Для оптимизации загрузки SPA рекомендуется использовать ленивую загрузку компонентов:

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

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

Навигация с query-параметрами и хешем

Query-параметры передаются через объект query:

router.push({ path: '/search', query: { q: 'vue' } });

Для использования хеша:

router.push({ path: '/home', hash: '#section2' });

Мониторинг маршрутов

Компоненты могут отслеживать изменения маршрута с помощью реактивного объекта route или хуков watch:

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

export default {
  setup() {
    const route = useRoute();
    watch(() => route.fullPath, (newPath) => {
      console.log('Путь изменился на', newPath);
    });
  }
};

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

Программный контроль навигации и история

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

router.go(-1); // Назад
router.go(2);  // Вперед на 2 шага

Также возможно прослушивание событий перехода с помощью событий навигации:

router.afterEach((to, from) => {
  console.log(`Перешли с ${from.fullPath} на ${to.fullPath}`);
});

Метаданные маршрутов

Каждый маршрут может содержать объект meta, который хранит произвольные данные:

{ path: '/admin', component: Admin, meta: { requiresAuth: true } }

Доступ к метаданным осуществляется через объект route.meta, что удобно для управления доступом или отображением UI.

Характеристики и производительность

Vue Router оптимизирован для SPA, поддерживает:

  • Ленивую загрузку компонентов.
  • Сохранение состояния маршрута при навигации.
  • Настраиваемые scroll-behavior для прокрутки страницы:
const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return savedPosition || { top: 0 };
  }
});
  • Полную интеграцию с Composition API и реактивностью Vue 3.
Оглавление