Начало работы

В примерах этого руководства мы будем использовать синтаксис ES2015.

Создать одностраничное приложение используя Vue.js и vue-router — проще простого. Используя Vue.js, мы уже собираем своё приложение из компонентов. Добавляя vue-router, мы просто сопоставляем компонентам пути, и указываем, где именно их отображать. Вот простой пример:

Во всех примерах руководства применяется standalone-версия Vue, что позволяет использовать парсинг шаблонов. Более подробно о разнице версий можно почитать здесь.

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- используйте компонент router-link для создания ссылок. -->
    <!-- входной параметр `to` задаёт путь для перехода -->
    <!-- по умолчанию <router-link> отображается тегом `<a>` -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- компонент, соответствующий пути, отобразится здесь -->
  <router-view></router-view>
</div>

JavaScript

// 0. Если вы используете модульную системы (напр. через vue-cli),
// импортируйте Vue и VueRouter и вызовите Vue.use(VueRouter).

// 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 = new VueRouter({
  routes // сокращение от routes: routes
})

// 4. Создайте и примонтируйте корневой инстанс приложения.
// Удостоверьтесь, что передали инстанс роутера в одноимённой опции,
// что позволит приложению знать о его наличии
const app = new Vue({
  router
}).$mount('#app')

// Всё, приложение работает! ;)

Вживую этот пример доступен здесь.

Обратите внимание, что <router-link> автоматически получает класс .router-link-active при совпадении пути. Более подробно об этом можно почитать в справочнике API.

results matching ""

    No results matching ""