# Роутинг

# Официальный роутер

Для большинства одностраничных приложений (SPA) рекомендуется использовать официально поддерживаемую библиотеку Vue-router (opens new window). Подробная информация по её использованию содержится в документации библиотеки (opens new window).

# Простой роутер с нуля

Если вам достаточно простейшего роутера и вы не хотите задействовать полновесную внешнюю библиотеку, может оказаться достаточно просто динамической отрисовки компонента уровня страницы:

const { createApp, h } = Vue

const NotFoundComponent = { template: '<p>Страница не найдена</p>' }
const HomeComponent = { template: '<p>Главная страница</p>' }
const AboutComponent = { template: '<p>Страница о нас</p>' }

const routes = {
  '/': HomeComponent,
  '/about': AboutComponent
}

const SimpleRouter = {
  data: () => ({
    currentRoute: window.location.pathname
  }),
  computed: {
    CurrentComponent() {
      return routes[this.currentRoute] || NotFoundComponent
    }
  },

  render() {
    return h(this.CurrentComponent)
  }
})

createApp(SimpleRouter).mount('#app')

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

В сочетании с History API (opens new window) можно создать простейший, но вполне рабочий клиентский роутер. Для практического примера, смотрите это демонстрационное приложение (opens new window).

# Интеграция сторонних роутеров

Если вы предпочитаете использовать сторонний роутер, как например Page.js (opens new window) или Director (opens new window), интеграция тоже довольна проста (opens new window). Вот полный пример (opens new window) для Page.js.

← Публикация на production Управление состоянием приложения →