Использование Vue Router для навигации

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

1. Установка Vue Router

Если вы создаете проект с нуля, вы можете установить Vue Router с помощью npm или yarn:

npm install vue-router

или

yarn add vue-router

2. Настройка Vue Router

Создайте файл router.js (или router/index.js) для настройки маршрутов.

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/components/Home.vue'; // Импортируйте ваши компоненты
import About from '@/components/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  mode: 'history', // Используйте history mode для чистых URL (без #)
  routes
});

export default router;

3. Подключение Router к Vue

Импортируйте и используйте созданный роутер в основном файле вашего приложения (обычно main.js или app.js).

import Vue from 'vue';
import App from './App.vue';
import router from './router'; // Импортируйте роутер

new Vue({
  router, // Подключите роутер к Vue
  render: h => h(App)
}).$mount('#app');

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

В вашем основном компоненте (например, App.vue), используйте <router-view> для отображения компонентов, соответствующих текущему маршруту, и <router-link> для навигации.

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

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

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

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

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

6. Программная навигация

Вы можете программно переходить на другой маршрут с помощью this.$router.push:

this.$router.push('/about');

Или с объектом:

this.$router.push({ path: '/user/123' });

7. Обработка 404 страниц

Для обработки несуществующих маршрутов добавьте маршрут с path: '*' в конец списка маршрутов:

const routes = [
  // другие маршруты
  {
    path: '*',
    component: NotFound
  }
];

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

Вы можете создавать вложенные маршруты, используя свойство children:

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
];

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

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

router.beforeEach((to, from, next) => {
  // Логика перед переходом
  next();
});

router.afterEach((to, from) => {
  // Логика после перехода
});

10. Ленивая загрузка маршрутов

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

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

Заключение

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