Як здійснити перенаправлення на іншу сторінку у Vue.js?

У Vue.js існує кілька способів здійснення переходу на іншу сторінку, залежно від того, чи використовується Vue Router або звичайний редирект.

---

1. Використання Vue Router (рекомендований підхід)

Vue Router — це офіційна бібліотека для маршрутизації у Vue-застосунках. Якщо ваш проєкт використовує vue-router, то найкращий спосіб зробити редирект — це використання this.$router.push() або useRouter() у Vue 3.

📌 Переадресація за допомогою this.$router.push() (Vue 2 & Options API у Vue 3)

<template>
  <button @click="redirectToHome">Перейти на головну</button>
</template>

<script>
export default {
  methods: {
    redirectToHome() {
      this.$router.push('/home'); // Перенаправлення на /home
    }
  }
};
</script>

Як працює?

• this.$router.push('/home') змінює URL на /home, і Vue Router відображає відповідний компонент.

---

📌 Використання useRouter() у Composition API (Vue 3)

Якщо ви використовуєте Composition API, потрібно скористатися useRouter().

<template>
  <button @click="redirectToHome">Перейти на головну</button>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const redirectToHome = () => {
  router.push('/home'); // Перенаправлення на /home
};
</script>

Чому це краще?

• useRouter() дозволяє використовувати router.push() без this.

---

📌 Перенаправлення з параметрами

Якщо потрібно передати параметри (наприклад, ID користувача), можна використовувати об’єкт:

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

Або у Composition API:

router.push({ name: 'userProfile', params: { id: 123 } });

---

2. Використання router.replace()

Метод replace() змінює URL без додавання нового запису в історію браузера, тобто користувач не зможе повернутися назад кнопкою “Назад”.

this.$router.replace('/dashboard');

Або у Composition API:

router.replace('/dashboard');

---

3. Використання window.location.href (без Vue Router)

Якщо Vue Router не використовується (наприклад, у класичному Vue-застосунку або для редиректу на зовнішній сайт), можна використати window.location.href:

window.location.href = 'https://example.com';

🔹 Недолік: Це повне перезавантаження сторінки, що не рекомендується для SPA-застосунків.

---

4. Використання window.location.replace() (без можливості повернення назад)

Цей метод працює подібно до router.replace(), але без Vue Router:

window.location.replace('https://example.com');

🔹 Різниця з href: replace() не зберігає попередню сторінку в історії браузера.

---

Підсумок: який метод вибрати?

Підхід	Коли використовувати?	Підтримує історію браузера?
this.$router.push('/home')	Vue Router, SPA	✅ Так
router.push('/home')	Vue 3 + Composition API	✅ Так
this.$router.replace('/dashboard')	Vue Router без збереження історії	❌ Ні
window.location.href = 'https://example.com'	Зовнішні сайти, без Vue Router	✅ Так
window.location.replace('https://example.com')	Зовнішні сайти без можливості повернення	❌ Ні

🔹 Рекомендований підхід – Vue Router (push або replace), якщо ваш застосунок його використовує.
🔹 Для редиректу на зовнішній сайт – window.location.href.