От автора: VueJS не имеет встроенной функции маршрутизации. Для ее установки нам придётся выполнить несколько дополнительных шагов.
Скачать напрямую из CDN
Последняя версия vue-router доступна по адресу //unpkg.com/vue-router/dist/vue-router.js
Unpkg.com предоставляет cdn-ссылки на основе npm. Пакет, доступный по указанной выше ссылке всегда обновляется до последней версии. Мы можем загрузить его и разместить на своих ресурсах, а потом использовать с тэгом script вместе с vue.js, как в следующем примере:
|
1 2 |
<script src = "/path/to/vue.js"></script> <script src = "/path/to/vue-router.js"></script> |
Использование NPM
Выполните следующую комманду, чтобы установить vue-router.
|
1 |
npm install vue-router |
Использование GitHub
Мы можем клонировать репозиторий из GitHub следующим образом
|
1 2 3 4 |
git clone //github.com/vuejs/vue-router.git node_modules/vue-router cd node_modules/vue-router npm install npm run build |
Давайте рассмотрим простой пример используя vue-router.js. Пример
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<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. Возьмите код из //unpkg.com/vue-router/dist/vue-router.js и сохраните его в файле vue-router.js. script добавляется после vue.js следующим образом:
|
1 2 |
<script type = "text/javascript" src = "js/vue.js"></script> <script type = "text/javascript" src = "js/vue-router.js"></script> |
В разделе body находится ссылка на роутер, определённая таким образом:
|
1 2 3 4 |
<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, в которой инициализируется роутер. Следующим образом создаются две необходимые константы:
|
1 2 |
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.
|
1 2 3 4 |
const routes = [ { path: '/route1', component: Route1 }, { path: '/route2', component: Route2 } ]; |
Маршурты (Routes) определяют путь и компонент. Путь, то есть /route1 будет отображён в URL после нажатия на ссылку роутера. Компонент принимает имена шаблонов для отображения. Путь из маршрутов должен совпадать с ссылкой роутера на свойство. Например, <router-link to = «path here»></router-link>
Дальше создаётся экземпляр для VueRouter при помощи следующего кода.
|
1 2 3 |
const router = new VueRouter({ routes // сокращение для `routes: routes` }); |
Конструктор VueRouter принимает маршруты в качестве параметра. Объект роутера присваивается главному экземпляру vue при помощи следующего кода.
|
1 2 3 4 |
var vm = new Vue({ el: '#app', router }); |
Выполните приведенный выше код и посмотрите, как отображается элемент в браузере. Мы увидим, что у нас также добавляется класс к активному элементу, как продемонстрировано на следующем скриншоте.
У нас был добавлен следующий класс: class = “router-link-exact-active router-link-active”. Активная ссылка получает класс, как продемонстрировано на приведённом выше скриншоте. Следует обратить внимание на то, что router-link отображается как тэг.
Свойства для Router Link
Давайте рассмотрим дополнительные свойства, которые передаются router-link.
to
Это путь назначения, переданный
|
1 2 3 4 5 6 |
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 является частью строки запроса. Например: //localhost/vueexamples/vue_router.html#/route1?name = Tery
replace
При добавлении replace к ссылке роутера будет вызываться router.replace(), вместо router.push(). С replace история навигации не сохраняется. Пример
|
1 |
<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. Пример
|
1 |
<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link> |
tag
На данный момент router-link отображается как тег. В том случае, если мы хотим, чтобы ссылка отображалась как другой тэг, то нужно указать то же самое, используя tag = ”tagname”. Пример
|
1 2 3 4 |
<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. Мы можем переписать класс, задавая то же самое, следующим образом:
|
1 2 3 4 5 6 7 8 9 |
<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. Пример
|
1 2 3 4 |
<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. Пример
|
1 |
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link> |
Теперь, когда мы применяем mouseover к ссылке роутера, то получим в браузере следующее. Примените Mouseover для Router link 1 и вы увидите, как изменится навигация.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
