Руководство

Роутинг

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

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

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

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

const NotFound = { template: '<p>Страница не найдена</p>' }
const Home = { template: '<p>главная</p>' }
const About = { template: '<p>о нас</p>' }

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

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

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

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

← Поддержка TypeScript Управление состоянием приложения →
Обнаружили ошибку или хотите добавить что-то своё в документацию? Отредактируйте эту страницу на GitHub!