Сторонние расширения

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

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

После установки подключение библиотеки осуществляется в основном файле приложения (обычно main.js или main.ts):

import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes';

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

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

Создание маршрутов

Маршруты определяются как массив объектов, где каждый объект описывает путь, компонент и дополнительные параметры:

import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/:pathMatch(.*)*', redirect: '/' } // Обработка несуществующих маршрутов
];

export default routes;

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

  • path – путь маршрута, который отображается в адресной строке.
  • component – компонент Vue, который будет рендериться.
  • Поддерживается использование динамических сегментов (/user/:id) и catch-all маршрутов (/:pathMatch(.*)*).

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

Vue Router предоставляет директиву router-link и объект router для программной навигации.

Через шаблон:

<router-link to="/about">О нас</router-link>

Программно:

this.$router.push('/about');
// или с объектом
this.$router.push({ name: 'about', query: { ref: 'home' } });

Ключевые возможности:

  • push – добавляет новый маршрут в историю браузера.
  • replace – заменяет текущий маршрут без добавления в историю.
  • go(n) – перемещение по истории на n шагов.

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

Маршруты могут содержать параметры, которые затем доступны через объект $route.params.

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

// В компоненте User
export default {
  mounted() {
    console.log(this.$route.params.id);
  }
};

Особенности:

  • Параметры могут быть обязательными (:id) или необязательными (:id?).
  • Для передачи нескольких параметров используется объект:
this.$router.push({ name: 'user', params: { id: 123 } });

Работа с query-параметрами

Query-параметры передаются через строку запроса и доступны в $route.query.

this.$router.push({ path: '/search', query: { q: 'vue' } });
console.log(this.$route.query.q); // "vue"

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

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

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

Для рендеринга дочерних маршрутов используется <router-view> внутри родительского компонента.

Навигационные хуки

Vue Router предоставляет хуки для управления навигацией и контроля доступа.

Глобальные хуки:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

Маршрутные хуки:

const routes = [
  { 
    path: '/admin', 
    component: Admin, 
    beforeEnter: (to, from, next) => {
      if (!isAdmin()) next('/');
      else next();
    }
  }
];

Внутри компонента:

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => vm.loadData());
  },
  beforeRouteUpdate(to, from, next) {
    this.loadData();
    next();
  },
  beforeRouteLeave(to, from, next) {
    if (this.hasUnsavedChanges) next(false);
    else next();
  }
};

Lazy Loading маршрутов

Для оптимизации загрузки крупных приложений компоненты маршрутов можно загружать лениво:

const routes = [
  { 
    path: '/about', 
    component: () => import('./components/About.vue') 
  }
];

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

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

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

Именованные маршруты позволяют ссылаться на маршруты по имени:

const routes = [
  { path: '/profile/:id', name: 'profile', component: Profile }
];

this.$router.push({ name: 'profile', params: { id: 42 } });

Именованные представления позволяют отображать несколько компонентов одновременно:

const routes = [
  { 
    path: '/layout', 
    components: { default: Main, sidebar: Sidebar }
  }
];

В шаблоне:

<router-view></router-view>
<router-view name="sidebar"></router-view>

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

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

const routes = [
  { path: '/admin', component: Admin, meta: { requiresAuth: true } }
];

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) next('/login');
  else next();
});

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

Scroll Behavior

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

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition;
    if (to.hash) return { el: to.hash, beh * avior: 'smooth' };
    return { top: 0 };
  }
});

Особенности:

  • savedPosition используется при возврате на предыдущую страницу.
  • Навигация по якорям (hash) поддерживается автоматически.

Программное управление историей

Vue Router поддерживает три режима истории:

  • createWebHistory() – HTML5 History API, чистые URL без хэшей.
  • createWebHashHistory() – URL с #, не требует серверной настройки.
  • createMemoryHistory() – для серверного рендеринга или тестирования.

Поддержка TypeScript

Vue Router полностью совместим с TypeScript. Определение маршрутов можно типизировать для безопасности:

import { RouteRecordRaw } from 'vue-router';

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

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

Интеграция с Vuex и другими сторонними библиотеками

Vue Router легко интегрируется с глобальным состоянием:

router.beforeEach((to, from, next) => {
  if (store.state.user.isLoggedIn) next();
  else next('/login');
});

Также поддерживаются сторонние расширения для анимаций, уведомлений и отслеживания событий навигации.

Продвинутые техники

  • Навигация с переходом между разными вкладками: использование history.pushState и beforeRouteLeave.
  • Асинхронные проверки прав доступа: вызов API перед разрешением перехода.
  • Множественные динамические сегменты и регулярные выражения:
{ path: '/product/:category(\\d+)/:id', component: Product }
  • Программное управление сохранением состояния компонентов через keep-alive и v-if в сочетании с маршрутизатором.

Эти возможности делают Vue Router универсальным инструментом для построения сложных SPA с продвинутой навигацией и контролем доступа.

Оглавление