С удалением this.$children
из Vue 2 я полностью потерял представление о том, как создать компонент вкладок в Vue 3. Сначала я подумал об использовании ссылок на шаблоны, доступ к которым можно получить через this.$refs
в новом API композиции Vue для достижения аналогичного результата. , но я новичок в API композиции, и в документации Vue 3 специально сказано не использовать this.$refs
в качестве реактивного свойства.
Поэтому я начал думать о другом способе создания вкладок в моем проекте, способе, о котором я должен был подумать с самого начала — просто использовать Vue router и вложенные маршруты!
Прежде чем продолжить, я предполагаю, что у вас есть некоторый опыт работы с Vue 2/3 и JavaScript. Если вы не знакомы ни с одним из них, я бы посоветовал вам ознакомиться с документацией Vue 2 и Vue 3, прежде чем продолжить. Кроме того, на вашем компьютере должен быть установлен NPM, чтобы вы могли установить Vue CLI, инструмент командной строки, который я буду использовать в этом руководстве.
Шаг 1: Создайте пустой проект Vue 3
Теперь давайте начнем. Во-первых, с установленным Vue CLI создайте новый проект:
vue create tabs-example
Вам будет предложено выбрать пресет. В Vue CLI v.4.5.x у меня есть только два доступных — Vue 2 и Vue 3. Выберите Vue 3, который выглядит так:
Default (Vue 3) ([Vue 3] babel, eslint)
Теперь у вас есть шаблонный проект Vue. Чтобы создать компонент вкладок, вам потребуется установить Vue router. Маршрутизатор Vue поможет пользователям перемещаться между маршрутами (или страницами) в вашем приложении.
Шаг 2: Добавьте маршрутизатор Vue
Более того, это будет преимущество навигации по вкладкам в вашем приложении: пользователи смогут перемещаться между вложенными маршрутами (вкладки) внутри родительских маршрутов (страниц). Чтобы установить маршрутизатор Vue через Vue CLI, выполните следующую команду:
vue add router
Он спросит вас, хотите ли вы использовать режим истории, продолжайте и отклоните. Теперь, если вы запустите npm run serve
и перейдете на localhost:8080 в своем браузере, вы должны увидеть шаблонное приложение vue с двумя маршрутами: Главная и О программе. сильный>.
Шаг 3: Создание вкладок через вложенные маршруты
Теперь самое интересное — создание вкладок. Внутри каталога /views
вашего проекта создайте два новых компонента: История и Контакты. Если вам нужен пустой шаблон компонента, я создал суть, которую довольно часто использую для себя, которую вы можете скопировать:
После создания компонентов откройте /src/router/index.js
в своем проекте, который является файлом маршрутизатора. К маршруту /about
вы добавите новый аргумент children: []
и добавите к нему новые компоненты История и Контакты. Ваш файл должен выглядеть так:
На данный момент вы почти закончили. Вы создали два новых компонента и настроили для них маршрутизацию. Все, что осталось сделать из них во вкладки, — настроить вложенный шаблон <router-view>
внутри родительской страницы /about
и добавить несколько ссылок через <router-link>
:
Router-view и router-link предоставляются непосредственно Vue Router. Router-view вставляет текущий совпадающий компонент из вашего файла маршрутов в маршрут, который вы посещаете в браузере. Router-link просто оборачивает тег привязки вокруг маршрута, который вы определяете для перехода.
Теперь, если вы перезагрузите localhost:8080, вы должны увидеть что-то вроде этого:
Шаг 4: Добавьте стиль
Виола, у вас есть компонент вкладок! Но на вкладки это не похоже. Без стилей это не выглядит чем-то полезным. Но это легко исправить с помощью CSS, добавленного в <style>
компонента About
:
После добавления стилей обновите localhost:8080, и вы должны увидеть окончательный компонент вкладок со стилями и всем остальным:
Теперь у вас есть вкладки, и вы можете легко добавить больше вкладок с помощью дополнительных вложенных маршрутов. Или вы можете создать вложенные маршруты на другом родительском маршруте, сохранив одинаковые стили, чтобы вкладки выглядели согласованно.
Если вы хотите увидеть полный исходный код этого небольшого проекта, вы можете проверить репозиторий Github здесь.