368  /  396

Маршрутизация внутри приложения - VueRouter

Просмотров: 1813 (Статистика ведётся с 06.02.2017)
Анна Кокина
Сложность урока:
4 уровень - сложно, требуется сосредоточится, внимание деталям и точному следованию инструкции.
1
2
3
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>

0
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии