От автора: 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 следующим образом
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.
to
Это путь назначения, переданный
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.