# 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.js
file, чтобы использовать наш маршрутизатор.
Шаг 5: Использование ‹router-view /› и ‹router-link›
Когда в браузере осуществляется навигация по маршруту, <router-view />
- это место, где визуализируется компонент. Для создания ссылок между различными страницами компонентов используется <router-link>
вместо <a href>
.
Так, например, простая страница с навигационным меню будет выглядеть так:
И вот оно! Теперь мы можем использовать наш новый маршрутизатор. Это было легко, правда?
Бонус: вы можете просто импортировать маршрутизатор автоматически
Вот как:
И вуаля! У вас будет рабочий роутер прямо из шаблона. Теперь вы можете спросить: «Тогда почему мы сделали все это вручную»? Потому что теперь вы понимаете, как работает маршрутизация на Vue 3, и можете настраивать ее и добавлять новые страницы, когда захотите. Всегда хорошо знать, как делать это самим! Кроме того, если бы я дал вам шаблонный маршрутизатор, не было бы учебника, и где в этом веселье?
Давайте подведем итог на сегодня - как обычно, если у вас есть какие-либо вопросы, комментарии или жалобы, снимайте их ниже в разделе комментариев!
Дебби х.