Vue.js

# Роутинг

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

Для большинства одностраничных приложений (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
28

В сочетании с 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.

← Управление состоянием приложения →