Если вы начали изучать Vue.js и SPA, рано или поздно вы пересечетесь с vue-router, чтобы разобраться с навигацией, которая неизбежна для полнофункционального приложения.
В двух словах: «Создание SPA с помощью Vue и Vue-Router настолько просто, насколько это возможно».
Если на вашем компьютере не установлен Vue, установите Vue через терминал: npm install -g @vue/cli
Затем создайте свое приложение: vue create name-of-your-app
Вам будет предложено выбрать предустановку в этом коротком проекте. Я выбираю зависимости Vue2 и vue-router, поскольку другие не имеют значения. Для получения дополнительной информации проверьте здесь.
Дерево разработки приложения в конце должно быть похоже на это. Убедитесь, что у вас есть базовые знания о правильной настройке vue CLI, понимании package.json и запуска npm. main.js содержит JavaScript для инициализации приложения Vue и должен импортировать router из './router ' (index.js). App.vue содержит корневой компонент приложения Vue.
Вот мой main.js
Настройка маршрутизации в index.js
В index.js нам нужно импортировать модуль vue-router из папки node_modules, потому что мы установили все наши зависимости в этом проекте и, очевидно, все компоненты, которые будут действовать как путь маршрутизатора.
Компонент App.vue
Как и в любом другом проекте, мы начинаем с удаления components/HelloWorld.Vue и автоматически вставляем этот компонент внутрь заполнителя id=”app”. То же самое о стиле и настроить его в соответствии с нашим проектом.
Компонент <Navbar /> добавляется, и на него нужно ссылаться в нашем компоненте. Это зависимость.
Создание панели навигации
Поскольку каждый компонент создает собственный тег <template> внутри него, мы создаем тег nav. Тег nav определяет стиль панели навигации и «элемента меню» для отдельных элементов.
Здесь в игру вступает волшебство <router-link> — это компонент для обеспечения навигации пользователя в приложении с поддержкой маршрутизатора.
Примечание. <router-link> предпочтительнее жестко заданного <a href="..."> по следующим причинам:
Свойство to в router-link будет передано router.push() внутренне, поэтому значение может быть либо строкой, либо объектом дескриптора местоположения. В нашем случае мы определили путь и компонент маршрута в index.js для больше информации смотрите здесь.
Выпадающий компонент
Наконец, поскольку в нашем приложении нам нужна функция раскрывающегося списка, мы создаем новый компонент с именем Службы, который сделает эту работу!
В пункте меню мы используем так называемый обработчик событий. Это одна из причин, по которой VueJS хвалят и принимают во всем мире за его простоту и удобство использования. Реквизит title в скрипте должен получить название заголовка из компонента Navbar.vue.
Когда элемент щелкается в этом случае Services, он активирует обработчик события click, который активирует isOpen в свойстве data, он работает как функция, и его значение по умолчанию равно false, поэтому каждый раз, когда он нажимается, значения true, false меняются.
- Элемент Svg — это контейнер для графики SVG.
- Переход для более плавного затухания при открытии элементов списка.
3. Директива v-if используется для условной отрисовки блока, здесь она проверяет, были ли нажаты Сервисы, чтобы список не отображался просто из окна начало:
Я пытался сделать выпадающую маршрутизацию более динамичной, а не жестко запрограммированной. Все еще в процессе обучения, в следующий раз следует реализовать больше вложенной маршрутизации, но мы все делаем все возможное, чтобы учиться и совершенствоваться!
Примечание. Я бы добавил в этот пост блога другие компоненты, такие как "Контакты", "О нас", "Интернет" и т. д., но я знаю, что время читателей имеет значение, и поэтому постараюсь сделать его кратким и лаконичным!
Заключение
Надеюсь, вы узнали что-то новое о Vue.js и vue-router. Я новичок в этом, так как мой основной интерес связан с бэкэндом, но по мере увеличения сложности проектов в арсенале должно быть больше навыков! Я большой поклонник Progressive JavaScript Framework и надеюсь, что вы будете таким же.
Мой репозиторий GitHub для проекта ниже:
