Просмотров: 5181
Дата последнего изменения: 15.01.2019
Сложность урока:
4 уровень - сложно, требуется сосредоточится, внимание деталям и точному следованию инструкции.
5
Недоступно в редакциях:
Ограничений нет
|
Маршрутизация внутри приложения - VueRouter |
Vue Router — официальная библиотека маршрутизации для Vue.js
. Она глубоко интегрируется с ядром Vue.js, что позволяет создавать SPA-приложения с лёгкостью.
Включает следующие возможности:
- Вложенные маршруты/представления
- Модульная конфигурация маршрутизатора
- Доступ к параметрам маршрута, query, wildcards
- Анимация переходов представлений на основе Vue.js
- Удобный контроль навигации
- Автоматическое проставление активного класса CSS для ссылок
- Режимы работы HTML5 history или хэш, с авто-переключением в IE9
- Настраиваемое поведение прокрутки страницы
Подключение на PHP-странице
Для начала работы подключите Bitrix CoreJS расширение
ui.vue.router
Доступно с ui 18.5.1.
в вашем компоненте или на php-странице с помощью \Bitrix\Main\UI\Extension::load("ui.vue.router");
Как использовать маршрутизатор
<div id="vue-application"></div>
<script>
// 1. Определяем компоненты для маршрутов.
// Они могут быть импортированы из других файлов
const Foo = { template: '<div>foo</div>' };
const Bar = { template: '<div>bar</div>' };
// 2. Определяем несколько маршрутов
// Каждый маршрут должен указывать на компонент.
// "Компонентом" может быть как конструктор компонента, созданный
// через `Vue.extend()`, так и просто объект с опциями компонента.
// Мы поговорим о вложенных маршрутах позднее.
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
];
// 3. Создаём экземпляр маршрутизатора и передаём маршруты в опции `routes`
// Вы можете передавать и дополнительные опции, но пока не будем усложнять.
const router = BX.VueRouter.create({
routes // сокращённая запись для `routes: routes`
});
// 4. Создаём и монтируем корневой экземпляр приложения.
// Убедитесь, что передали экземпляр маршрутизатора в опции
// `router`, чтобы позволить приложению знать о его наличии.
BX.Vue.create({
el: '#vue-application',
router, // сокращённая запись для `router: router`
template: `
<div>
<h3>VueRouter</h3>
<div>
<router-link to="/foo">Перейти к Foo</router-link>
<router-link to="/bar">Перейти к Bar</router-link>
</div>
<router-view></router-view>
</div>
`
});
</script>