Vuejs — это прогрессивный фреймворк, который используется для создания одностраничных веб-приложений с использованием компонентов. Без обновления браузера приложение может переходить со страницы на страницу с помощью маршрутизатора Vue. Это помогает разрабатывать динамичные и отличные интерфейсные приложения. Vuejs известен созданием SPA (одностраничных приложений) и имеет библиотеку маршрутизации для управления пользовательским интерфейсом из самого интерфейса. Это улучшает взаимодействие с пользователем и повышает скорость отклика приложения. Итак, в этом руководстве давайте обсудим, как настроить ваше веб-приложение с помощью Vue-router и варианты его использования.

Зачем нам нужен Vue Router?

В каждом проекте должна быть реализована маршрутизация, что является фундаментальным требованием. Это облегчает связь между представлениями и URL-адресами. Вы можете реализовать маршрутизацию в любой современной среде. Пакет Vue Routing от VueJS позволяет подключать компоненты к маршрутам.

Преимущество использования vue-router заключается в том, что вы можете изменить путь маршрута без необходимости изменять путь при каждом вызове <router-link> или this.$router.push().

Итак, давайте посмотрим, как добавить vue-router в ваше веб-приложение.

Установите последнюю версию vue-router.

Чтобы установить последнюю версию vue-router, используйте «@next» после vue-router.

npm install --save vue-router@next

Установив это, мы можем перейти к созданию наших первых маршрутов!

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

Чтобы использовать установленную библиотеку маршрутизатора, мы хотим ее импортировать. После этого вам нужно добавить к нему конфигурацию, например, какие разные маршруты и какие разные URL-адреса вы хотите поддерживать. Для этого вы определяете объект javascript с помощью маршрутизатора создания, и у него может быть два варианта.

  1. маршруты — разные URL-адреса, которые вы хотите поддерживать.
  2. history — По сути, сообщает маршрутизатору, как управлять историей маршрутизации в приложении. Когда пользователь щелкает где-либо, он переходит на другую страницу. Затем в историю просмотров добавляются две страницы, и если пользователь нажимает кнопку «Назад», история гарантирует, что маршрутизатор знает, какая была последняя страница. Мы можем использовать createWebHistory, чтобы использовать встроенный механизм Vuejs для запоминания пользователя.

1. Регистрация и отрисовка маршрутов

Чтобы зарегистрировать маршруты, мы можем добавить объекты в массив маршрутов.

путь: — это путь URL-адреса.

компонент: здесь мы определяем, какой компонент должен быть загружен при посещении URL.

Вот пример сегмента кода маршрутов: [] определен.

routes:[
   { path: '/about', component: AboutComponent},
   { path: '/home', component: HomeComponent}
]

Чтобы быть в курсе роутера, нам нужно добавить «app. использовать(маршрутизатор);” в файле main.js.

Чтобы маршрутизатор представления знал, где мы визуализируем наши компоненты, нам нужно добавить ‹router-view›‹/router-view›. Это может сказать вам, что это место, где должны быть загружены два компонента выбранного маршрутизатора. Вы можете получить доступ к проекту здесь.

2. Навигация с помощью router-link

router-link почти как якорный тег. Но он особенный, так как не загружается на другую страницу. Перезагрузка всего приложения и, следовательно, потеря текущего состояния не позволяют использовать ссылку на маршрутизатор. View router берет на себя и анализирует ссылку, по которой щелкнул пользователь. Это загрузит соответствующий компонент и также обновит URL-адрес.

Вы можете добавить любой элемент HTML в теги router-link. Мы можем добавить к этому URL-адрес пути, используя to=``. Ниже приведен пример, который я использовал.

<router-link to="/about"> My component </router-link>

Браузер не будет обновляться. Таким образом, эта особая вещь появляется вместе с маршрутизатором vue и отличается от тега привязки в HTML. Вот фрагмент кода.

Вы можете получить доступ к проекту здесь.

3. Программная навигация

Чтобы перейти к другому URL-адресу, используйте router.push. Этот метод помещает новую запись в стек истории. Поэтому, когда пользователь нажимает кнопку «Назад» в браузере, он переходит на предыдущий URL-адрес. Нажатие ‹router-link :to=``› эквивалентно вызову router.push().

После того, как вы выполнили какую-то операцию в методе, вам нужно изменить маршрут. Итак, вот этот метод.$router.push. Вы можете увидеть, как я реализовал программную навигацию в приведенном ниже фрагменте кода в методе confirmInput.

Вы можете добавить обратный и прямой маршруты при нажатии на браузер с помощью следующих команд соответственно.

this.$router.back();
this.$router.forward();

Вы можете получить доступ к проекту здесь.

4. Передача данных с помощью параметров маршрута (динамических сегментов)

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

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

{ path: '/teams/:id, component: TeamList}

Этот маршрут становится активным, если вы предоставляете идентификатор команды вместе с URL-адресом. Таким образом, в соответствующем компоненте мы можем поймать параметр, который передается с использованием определенных в нем параметров.

const teamId = this.$route.params.id;

В this.$route.params.id id означает, что мы включили в параметр пути. Если вы определили параметр маршрута с другим именем, вам необходимо указать этот идентификатор для этого. Ниже приведен фрагмент кода, который показывает получение передаваемого параметра.

Вы можете получить доступ к проекту отсюда. Мы также можем добавить параметры в router-link. Это позволяет перемещаться по динамическим путям.

<router-link :to="'/teams/' + id"> View Teams <router-link>

5. Передача параметров в качестве реквизита

В приведенных выше примерах компоненты загружаются только через маршрутизацию. Потому что в коде мы полагаемся на $route. Если вы хотите загрузить веб-страницу, а не через роутинг, лучше всего использовать реквизиты.

Вы можете добавить еще один вариант, в котором значения реквизита также учитываются в URL-адресе.

{ path: '/teams/:id, component: TeamList, props: true}

Это делает одну важную вещь: он сообщает маршрутизатору представления, что динамические параметры должны быть переданы в этот компонент в качестве реквизита, а не только в свойстве $route. Значение теперь является частью URL-адреса (:id), теперь оно будет передано в компонент в качестве реквизита.

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

6. Использование параметров запроса

Параметр запроса — это то, что вы можете увидеть в некоторых маршрутах и ​​некоторых URL-адресах после вопросительного знака. Подобная сортировка равна возрастанию. Параметр запроса — это необязательный параметр маршрута, который не требуется для поиска загруженного компонента, но может использоваться для передачи дополнительной информации в этот компонент. Приведенный ниже код используется для хранения информации о параметрах вашего запроса.

this.$route.query

Примечание. Параметры запроса не предоставляются в качестве реквизита. Доступ к параметрам запроса возможен только через $route.

Мы включили getqueryparam в тест, как в этом URL: http://localhost:8080/teams/T1?test=getqueryparam.

Затем мы видим, что в консоли отображается только параметр запроса, как показано ниже. Вы можете получить доступ к проекту здесь.

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

Надеюсь, вы все поняли урок. Если у вас есть какие-либо сомнения, пожалуйста, не стесняйтесь комментировать здесь. Спасибо и желаю всего самого наилучшего!