Vue JS – Функция маршрутизации

Vue JS – Функция маршрутизации

От автора: VueJS не имеет встроенной функции маршрутизации. Для ее установки нам придётся выполнить несколько дополнительных шагов.

Скачать напрямую из CDN

Последняя версия vue-router доступна по адресу https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com предоставляет cdn-ссылки на основе npm. Пакет, доступный по указанной выше ссылке всегда обновляется до последней версии. Мы можем загрузить его и разместить на своих ресурсах, а потом использовать с тэгом script вместе с vue.js, как в следующем примере:

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

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

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

Использование NPM

Выполните следующую комманду, чтобы установить vue-router.

Использование GitHub

Мы можем клонировать репозиторий из GitHub следующим образом

Давайте рассмотрим простой пример используя vue-router.js. Пример

Результат

Чтобы запустить маршрутизацию, нам нужно добавить файл vue-router.js. Возьмите код из https://unpkg.com/vue-router/dist/vue-router.js и сохраните его в файле vue-router.js. script добавляется после vue.js следующим образом:

В разделе body находится ссылка на роутер, определённая таким образом:

router-link — это компонент, который выполняет навигацию к содержимому HTML, который будет отображаться для пользователя. Свойство to — это указание на исходный файл, где будет выбрано содержимое, которое нужно отобразить. На приведённом выше коде мы создали две ссылки на роутер. Взгляните на секцию script, в которой инициализируется роутер. Следующим образом создаются две необходимые константы:

Они содержат шаблоны, которые должны быть отображены при нажатии на ссылку роутера. Дальше следует константа routes, которая определяет путь, который будет отображаться в URL.

Маршурты (Routes) определяют путь и компонент. Путь, то есть /route1 будет отображён в URL после нажатия на ссылку роутера. Компонент принимает имена шаблонов для отображения. Путь из маршрутов должен совпадать с ссылкой роутера на свойство. Например, <router-link to = «path here»></router-link>

Дальше создаётся экземпляр для VueRouter при помощи следующего кода.

Конструктор VueRouter принимает маршруты в качестве параметра. Объект роутера присваивается главному экземпляру vue при помощи следующего кода.

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

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

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

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

У нас был добавлен следующий класс: class = “router-link-exact-active router-link-active”. Активная ссылка получает класс, как продемонстрировано на приведённом выше скриншоте. Следует обратить внимание на то, что router-link отображается как тэг.

Свойства для Router Link

Давайте рассмотрим дополнительные свойства, которые передаются router-link.

to

Это путь назначения, переданный. При нажатии на него значение to будет передано router.push(). Значением должна быть строка или точка назначения. При использовании объекта мы должны привязать его, как в примере 2.

Результат примера 3 выглядит так:

В URL-адресе пути name = Tery является частью строки запроса. Например: http://localhost/vueexamples/vue_router.html#/route1?name = Tery

replace

При добавлении replace к ссылке роутера будет вызываться router.replace(), вместо router.push(). С replace история навигации не сохраняется. Пример

append

Добавление append к <router-link><router-link> сделает путь относительным. Если мы хотим перейти от ссылки роутера с путем /route1 к ссылке роутера /route2, то нам выдаст следующий путь в браузере: /route1/route2. Пример

tag

На данный момент router-link отображается как тег. В том случае, если мы хотим, чтобы ссылка отображалась как другой тэг, то нужно указать то же самое, используя tag = ”tagname”. Пример

Мы указали тэг span и вот, что теперь у нас отображается в браузере.

Сейчас отображается тэг span.

active-class

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

Был использован класс active_class = ”_active”. В браузере будет отображаться следующее.

exact-active-class

Применённым классом exactactive по умолчанию является router-link-exact-active. Мы можем переписать его, используя exact-active-class. Пример

В браузере будет отображаться следующее.

event

На данный момент событием по умолчанию для router-link — это click. Мы можем это изменить, используя свойство event. Пример

Теперь, когда мы применяем mouseover к ссылке роутера, то получим в браузере следующее. Примените Mouseover для Router link 1 и вы увидите, как изменится навигация.

Источник: https://www.tutorialspoint.com/

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

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

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

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

VUE JS. Быстрый старт

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

Получить

Метки:

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

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

Комментарии 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