Как использовать маршрутизацию Vue.js Router для разработки лучшего опыта пользователя

Как использовать маршрутизацию Vue.js Router для разработки лучшего опыта пользователя

От автора: Vue.js — отличная JavaScript платформа, созданная Эваном Ю. Она используется для разработки отдельных приложений для веб-страниц и гибких компонентов, это также один из самых необходимых навыков при разработке Front End.

Vue.js предоставляет множество функций, которые позволяют создавать повторно используемые веб-компоненты. Маршрутизация — одна из таких функций. Она позволяет пользователю переключаться между страницами без обновления страницы. Это то, что делает навигацию в веб-приложениях простой и очень приятной. Итак, в этой статье я объясню, как работают маршрутизаторы Vue.js, создав в качестве примера шаблона Vue.js Router.

Приступаем к работе

Итак, давайте начнем с создания проекта Vue.js Router, установив и создав новый проект Vue.js. Нам нужно установить Node.js. Для создания нового проекта Vue.js мы будем использовать vue-cli. Выполните следующие действия. Введите и запустите в терминале следующий код:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Перейдите по адресу http://localhost:8080

Откройте приложение в текстовом редакторе. В папке компонентов откройте файл HellowWorld.vue и выполните следующие действия. Переименуйте HellowWorld.vue в home.vue. Удалите из файла весь код и замените его следующим:

Перейдите к файлу index.js в папке router и замените HelloWorld на home:

Файл App.vue должен выглядеть следующим образом:

А теперь давайте напишем наш код!

Мы добавим шаблон Bootswatch. Вы можете выбрать любой шаблон по своему усмотрению. Я выбираю Cosmo. Нажмите Ctrl + U, чтобы просмотреть исходный кода и просто скопируйте Navbar (нам нужен только navbar). Вставьте этот код в компонент App.vue.

Вот что у нас получилось:

Затем мы собираемся создать три других компонента: Blog,Services и Contact. Внутри папки компонентов создайте новый файл, назовите его blog.vue и вставьте в него этот код:

Если вы хотите сделать то же самое для компонентов Services и Contact, вам нужно создать следующие файлы в папке компонентов:

home.vue

blog.vue

services.vue

contact.vue

Настройка маршрутизаторов

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

Итак, как мы можем переходить к каждому компоненту с помощью маршрутизаторов? Нам нужно изучить правила маршрутизации. Теперь нам нужно внести некоторые изменения в папки маршрутизаторов, поэтому откройте файл index.js

Выполните следующие действия. Сначала импортируйте компоненты в index.js. Импортируйте все компоненты с помощью метода import.

Далее импортируйте Vue и модуль маршрутизатора из модуля vue-router:

Если вы установили Vue с vue-cli, модуль vue-router будет импортирован у вас по умолчанию.

И, наконец, в папке маршрутизаторов мы должны настроить маршрутизаторы, чтобы они заработали. Метод маршрутизатора принимает массив объектов, который, в свою очередь, принимает свойства каждого компонента:

path: путь компонента

name: имя компонента

component: представление компонента

Чтобы компонент являлся компонентом по умолчанию, добавьте слэш (‘/’) в свойство path:

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

У маршрутизатора vue есть более продвинутые параметры и методы, но на данном этапе мы этой темы касаться не будем. Это список свойств и методов, которые можно использовать с vue-router:

Теперь вы можете просматривать любые компоненты, введя имя компонента!

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

router-link принимает атрибут to=’path’, который принимает в качестве значения путь к компоненту.

Router-view

Вы найдете тег <router-view> в файле App.vue. Это в основном представление, в котором отображаются компоненты. Оно похоже на главный div, содержащий все компоненты, и возвращает компонент, соответствующий текущему маршруту. Мы рассмотрим маршруты в следующей части, когда используем анимацию перехода.

Использование параметров внутри маршрутизаторов

На этом этапе мы будем использовать параметры для перехода к конкретным компонентам. Параметры делают маршрутизацию динамической.

Для работы с параметрами мы создадим список товаров и массив данных. Когда вы нажимаете на ссылку какого-либо товара, вы с помощью параметра переходите к информации о товаре.

В данном случае мы не будем использовать базу данных или API для извлечения информации о товарах. Поэтому нам нужно создать массив товаров, который будет выполнять роль базы данных. Внутри компонента home.vue поместите массив в метод data() следующим образом:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Затем извлеките и переберите через цикл массив товаров, используя директиву v-for.

Результат:

Чтобы мы могли переходить к компоненту информации о товаре, сначала нужно добавить событие click:

Если вы нажмете на заголовок, он вернет undefined, потому что мы еще не создали компонент информации о товаре. Итак, давайте создадим его:

details.vue

Теперь при переходе мы не получаем больше ошибку:

Итак, как мы можем перейти на страницу информации о товаре и получить соответствующие данные, если у нас нет базы данных?

Мы можем использовать тот же массив товаров в компоненте информации о товаре. Таким образом, мы можем обрабатывать идентификатор, который связан с URL-адресом:

Сначала мы должны установить id в качестве параметра в метод goTodetail():

Затем добавьте в метод маршрутизатора второй параметр. Метод $router принимает два параметра: первый — имя компонента, к которому мы хотим перейти, второй — параметр id (или любой другой параметр).

Добавьте Pid в качестве параметра в index.js внутри папки маршрутизатора:

home.vue

Чтобы получить соответствующий параметр, используйте эту строку кода:

details.vue

Затем переберите через цикл массив товаров в файле detalils.vue и проверьте объект, который соответствует параметру Pid и возвращает его данные:

Теперь, когда мы нажимаем ссылку какого-либо товара, мы получаем этот товар!

Компонент detail.vue:

Переход

В этой части мы добавим анимацию переход к анимированному компоненту. Мы будем анимировать переход компонентов. Это делает навигацию красивой, и она создает лучший UX и UI. Чтобы задать анимацию перехода, поместите <router-view> внутри тега <transition/> и задайте для него имя класса.

App.vue

Чтобы анимировать переход компонента при входе в представление, добавьте enter-active к имени, указанному для тега transition. Затем добавьте действие leave-active и задайте для него свойства перехода CSS:

Использование анимации CSS3

Теперь мы зададим анимацию, используя @keyframes из CSS3. Когда компонент входит в представление, добавьте для представления эффект затухания.

Добавьте другой эффект затухания, когда компонент покидает представление. Теперь мы сделаем так, чтобы компонент перемещался и поднимался, когда он покидает представление.

Теперь вы можете создать собственные эффекты анимации и переходы для своих компонентов. Вот и все! Мы закончили! Исходный код вы можете скачать здесь.

Заключение

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

Автор: Said Hayani

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree