Как сделать редирект в Vue

На обычных страницах мы можем ссылаться на другие страницы с помощью указания ссылки через a-тег:

<a href="www.google.com">Google</a>

Если вы используете Vue Router, вы будете использовать специальный компонент RouterLink:

<RouterLink :to="www.google.com">Google</RouterLink>

Но что делать, если вы хотите сделать редирект программно, без использования тега для ссылки?

Если вы используете Vue Router, то вы просто подставите ссылку в компонент роутера, в метод push:

this.$router.push('www.yoursite.com/blog')

В этой заметке мы рассмотрим все способы редиректа на внутренние и внешние страницы. Разберём случаи использования Vue с Vue Router и без него.

Редирект на внутреннюю страницу

Сперва мы сделаем это на чистом Vue, а потом уже рассмотрим, как это сделать с использованием Vue Router.

Чистый Vue (без Vue Router)

Давайте представим, что вам нужно перенаправить пользователя на страницу https://www.yoursite.com/blog. Если вы захотите сделать это программно, то вам потребуется API браузера:

window.location.href = 'https://www.yoursite.com/blog';

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

window.location.href = 'blog';

Vue Router

Если вы используете Vue Router и хотите перенаправить пользователя в блог, то используем this.$router.push:

this.$router.push('www.yoursite.com/blog');

Используем относительный путь, чтобы упростить:

this.$router.push('blog');

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

// Именованный маршрут
const router = new VueRouter({
  routes: [
    {
      path: '/blog',
      name: 'blog',
      component: Blog,
    }
  ]
});

// Редирект в именованный роут
this.$router.push({ name: 'blog' });

Редирект на внешнюю страницу

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

Чистый Vue (без Vue Router)

Для перенаправления пользователя на внешнюю страницу необходимо просто подставить нужный URL:

window.location.href = 'https://www.google.com';

Обратите внимание, что здесь не работают относительные пути — вам нужно указывать другой хост.

Vue Router

Если вы используете Vue Router, то редирект на внешний сайт надо также делать через window.location.href. Это связано с тем, что Vue Router работает только внутри вашего Vue-приложения, и поэтому не может перенаправить пользователя за его пределы.

Заключение

Вы можете окунуться глубже в работу Vue Router и его опций с помощью официальной документации.