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

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

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

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

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

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

<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>

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

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

npm  install vue-router

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

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

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

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

Узнать подробнее
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

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

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 <script type = "text/javascript" src = "js/vue-router.js"></script>
 </head>
 <body>
 <div id = "app">
 <h1>Routing Example</h1>
 <p>
 <router-link to = "/route1">Router Link 1</router-link>
 <router-link to = "/route2">Router Link 2</router-link>
 </p>
 <!-- route outlet -->
 <!-- component matched by the route will render here -->
 <router-view></router-view>
 </div>
 <script type = "text/javascript">
 const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
 const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
 const routes = [
 { path: '/route1', component: Route1 },
 { path: '/route2', component: Route2 }
 ];
 const router = new VueRouter({
 routes // сокращение для `routes: routes`
 });
 var vm = new Vue({
 el: '#app',
 router
 });
 </script>
 </body>
</html>

Результат

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

<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>

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

<p>
 <router-link to = "/route1">Router Link 1</router-link>
 <router-link to = "/route2">Router Link 2</router-link>
</p>

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

const  Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }

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

const routes = [
 { path: '/route1', component: Route1 },
 { path: '/route2', component: Route2 }
];

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

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

const router = new VueRouter({
 routes // сокращение для `routes: routes`
});

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

var vm = new Vue({
 el: '#app',
 router
});

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

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

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

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

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

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

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

to

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

e.g. 1:  <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2:  <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
 "{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.

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

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

replace

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

<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}" replace>Router Link 1</router-link>

append

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

<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>

tag

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

<p>
 <router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
 <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

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

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

active-class

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

<style>
 ._active{
 background-color : red;
 }
</style>
<p>
 <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
 <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

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

exact-active-class

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

<p>
 <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
 <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

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

event

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

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

Теперь, когда мы применяем 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree