# ExplainLikeI’m5, часть 3

Это третье издание моей серии # ExplainLikeI’m5. Если вы хотите взглянуть на предыдущие выпуски, вы можете получить к ним доступ здесь: [1] и [2].

Несколько дней назад я наконец получил новую работу, и оказалось, что они используют Vue.js на всей платформе. Привыкнув к React довольно долгое время, я начал изучать Vue 3 с нуля, что означает, что мы официально вступаем в сезон года, когда мы изо всех сил пытаемся выполнить все эти второстепенные элементарные задачи! Но потерпите меня, я нас прикрыл.

По какой-то причине инструкции по настройке маршрутизатора на Vue 3 разбросаны по Интернету, и нужно в конечном итоге попробовать по крайней мере три или четыре разных мини-руководства, чтобы получить достаточную грамотность, чтобы это сработало. Пытаясь создать свой новый проект, я также случайно попытался следовать инструкциям по настройке маршрутизатора Vue 2 (что, очевидно, не сработало). После нескольких попыток я нашел самый простой способ настроить маршрутизатор на Vue 3. Приступим к работе!

Шаг 1: Создание нового проекта

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

Во-первых, мы хотим убедиться, что у нас есть последнее обновление Vue 3 CLI, которое мы можем запустить на терминале:

npm install -g @vue/cli

А затем создадим наше приложение Vue:

vue create my-project

Затем интерфейс командной строки спросит нас, какой пресет мы хотели бы использовать, и мы выберем предварительный просмотр Vue 3.

Теперь просто перейдите в свой каталог и запустите только что созданное приложение:

cd my-project
npm run serve

Шаг 2: Установите пакет маршрутизатора

Первым делом на вашем терминале и в папке вашего проекта вы нажмете следующее:

npm i vue-router@next

Шаг 3. Добавьте файл конфигурации

Далее мы собираемся создать наш router.js файл в папке /src. Это когда все начинает выглядеть немного иначе, чем Vue 2. Но не волнуйтесь, просто следуйте приведенному ниже коду:

Обратите внимание, что мы создаем наш routes в массиве, где мы указываем для каждого маршрута несколько важных элементов:

  • Путь - URL-путь, по которому можно найти этот маршрут.
  • Имя - необязательное имя, которое будет использоваться при переходе по этому маршруту.
  • Компонент - какой компонент загружать при вызове этого маршрута.

Шаг 4: Импортируйте роутер в приложение

Теперь нам нужно импортировать файл нашего маршрутизатора в наш main.jsfile, чтобы использовать наш маршрутизатор.

Шаг 5: Использование ‹router-view /› и ‹router-link›

Когда в браузере осуществляется навигация по маршруту, <router-view /> - это место, где визуализируется компонент. Для создания ссылок между различными страницами компонентов используется <router-link> вместо <a href>.

Так, например, простая страница с навигационным меню будет выглядеть так:

И вот оно! Теперь мы можем использовать наш новый маршрутизатор. Это было легко, правда?

Бонус: вы можете просто импортировать маршрутизатор автоматически

Вот как:

И вуаля! У вас будет рабочий роутер прямо из шаблона. Теперь вы можете спросить: «Тогда почему мы сделали все это вручную»? Потому что теперь вы понимаете, как работает маршрутизация на Vue 3, и можете настраивать ее и добавлять новые страницы, когда захотите. Всегда хорошо знать, как делать это самим! Кроме того, если бы я дал вам шаблонный маршрутизатор, не было бы учебника, и где в этом веселье?

Давайте подведем итог на сегодня - как обычно, если у вас есть какие-либо вопросы, комментарии или жалобы, снимайте их ниже в разделе комментариев!

Дебби х.