Vue.js Router

Vue.js - это реактивный javascript-фреймворк, который используется для создания UI (пользовательских интерфейсов) и SPA (одностраничных приложений), и разработчики любят кодировать и чувствовать свободу и комфорт при разработке приложений на Vue.js. Для целей маршрутизации Vue.js не предоставляет встроенную функцию маршрутизации. Но есть официальная сторонняя библиотека с названием Vue Router для предоставления этой функции. Используя эту функцию, мы можем перемещаться между веб-страницами, но без перезагрузки. Итак, в этой статье мы увидим, как мы можем установить и использовать Vue Router в Vue.js.

Монтаж

Мы можем установить маршрутизатор Vue в существующий Vue.js, выполнив следующую команду в терминале

npm установить vue-router

После успешной установки нам нужно импортировать VueRouter в основной.js в каталоге src, используя следующий синтаксис

импортировать Vue из 'vue'
импортировать маршрутизатор из './ router '
Vue.использовать (роутер)

После импорта маршрутизатора вы можете использовать vue-router в своем проекте.

Но если вы устанавливаете Vue.js с помощью Vue CLI. Вам не понадобится этот дополнительный шаг установки. Вы можете добавить плагин vue-router во время выбора пресета.

Применение

Использование vue-router очень просто и удобно. Сначала в шаблоне или HTML

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

В javascript мы сначала должны зарегистрировать и импортировать компоненты, чтобы определить их маршруты. Мы предполагаем, что у нас есть компонент с именем Comp.vue в каталоге представлений, в который мы будем импортировать в индекс маршрутизатора.js в каталоге маршрутизатора и определите его как маршрут.

Чтобы импортировать компонент, мы используем следующую инструкцию

импортировать комп из "… / views / Comp.vue ";

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

const routes = [

дорожка: "/",
название: "Комп",
компонент: Comp

];

Мы также можем указать несколько маршрутов через запятую. Как это,

const routes = [

дорожка: "/",
название: "Комп",
компонент: Comp
,

путь: "/ comp2",
название: "Comp2",
компонент: Comp2

];

После определения маршрутов. Передать массив маршрутов экземплярам роутера. Итак, давайте также создадим экземпляр роутера

const router = createRouter (
routes // сокращение от 'routes: routes'
);

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

createApp (приложение)
.использовать (роутер)
.монтировать ("# приложение");

Используя эту технику инъекции. Мы можем получить доступ к маршрутизатору в любом компоненте, используя это.$ router.

Теперь мы можем программно проталкивать маршруты одним нажатием кнопки или чем угодно, вместо использования компонента router-link. Например,

методы:
clickFunc ()
это.$ router.push ('/ о')

Подведение итогов и резюме

В этой статье мы научились устанавливать Vue Router разными способами и научились программно использовать Vue Router в javascript и Vue.js шаблон. Мы также научились настраивать Vue Router в существующем проекте в очень простом и пошаговом подробном руководстве. Если вы хотите узнать больше о Vue Router, посетите Vue Router: Official Docs.