Роутинг
Для большинства одностраничных приложений (SPA) рекомендуется использовать официально поддерживаемую библиотеку Vue-router. Подробная информация по её использованию содержится в документации библиотеки.
Простой роутер с нуля
Если вам достаточно простейшего роутера и вы не хотите задействовать полновесную внешнюю библиотеку, может оказаться достаточно просто динамической отрисовки компонента уровня страницы:
const NotFound = { template: 'Страница не найдена
' }
const Home = { template: 'главная
' }
const About = { template: 'о нас
' }
const routes = {
'/': Home,
'/about': About
}
new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname
},
computed:
ViewComponent () {
return routes[this.currentRoute]
},
render (h) { return h(this.ViewComponent) }
})
В сочетании с HTML5 History API, вы можете создать простейший, но вполне рабочий клиентский роутер. Для практического примера, смотрите это демонстрационное приложение.
Интеграция сторонних роутеров
Если вы предпочитаете использовать сторонний роутер, как например Page.js или Director, интеграция тоже довольна проста. Вот полный пример для Page.js.
Обнаружили ошибку или хотите добавить что-то своё в документацию? Измените эту страницу на GitHub! Опубликовано на Netlify .
# Начало работы
(opens new window) в примерах кода в этом руководстве.
Кроме того, все примеры будут использовать полную сборку Vue, чтобы позволить компиляцию шаблонов на лету. Подробнее о различиях сборок читайте здесь
Создавать одностраничные приложения (SPA) используя Vue + Vue Router очень просто: с помощью Vue.js, мы уже компонуем своё приложение из компонентов. Добавляя Vue Router, мы просто сопоставляем наши компоненты с маршрутами и объясняем Vue Router где их отображать. Вот простой пример:
# HTML
script src="https://unpkg.com/vue@2/dist/vue.js"> script> script src="https://unpkg.com/vue-router@3/dist/vue-router.js"> script> div id="app"> h1>Первое приложение!h1> p> ` по умолчанию отображается тегом `` --> router-link to="/foo">Перейти к Foorouter-link> router-link to="/bar">Перейти к Barrouter-link> p> router-view>router-view> div> # JavaScript
// 0. Если используем модульную систему (например через vue-cli), // импортируем Vue и VueRouter и затем вызываем `Vue.use(VueRouter)`. // 1. Определяем компоненты для маршрутов. // Они могут быть импортированы из других файлов const Foo = template: 'foo' > const Bar = template: 'bar' > // 2. Определяем несколько маршрутов // Каждый маршрут должен указывать на компонент. // "Компонентом" может быть как конструктор компонента, созданный // через `Vue.extend()`, так и просто объект с опциями компонента. // Мы поговорим о вложенных маршрутах позднее. const routes = [ path: '/foo', component: Foo >, path: '/bar', component: Bar > ] // 3. Создаём экземпляр маршрутизатора и передаём маршруты в опции `routes` // Вы можете передавать и дополнительные опции, но пока не будем усложнять. const router = new VueRouter( routes // сокращённая запись для `routes: routes` >) // 4. Создаём и монтируем корневой экземпляр приложения. // Убедитесь, что передали экземпляр маршрутизатора в опции // `router`, чтобы позволить приложению знать о его наличии. const app = new Vue( router >).$mount('#app') // Всё, приложение работает! ;) Внедряя маршрутизатор, мы сможем получить к нему доступ через this.$router , а также к текущему маршруту через this.$route внутри любого компонента:
// Home.vue export default computed: username() // Мы скоро разберём что такое `params` return this.$route.params.username > >, methods: goBack() window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/') > > > В документации мы будем часто использовать экземпляр router (маршрутизатора). Имейте ввиду, что this.$router в точности то же самое, что и router . Причина, почему используем this.$router заключается в том, что мы не хотим импортировать маршрутизатор в каждом компоненте, в котором потребуется управлять маршрутизацией.
Вы также можете увидеть этот пример вживую здесь
Обратите внимание, что автоматически получает класс .router-link-active при совпадении маршрута. Подробнее об этом можно узнать в справочнике API.
Vue Router
Define static and dynamic routes with an intuitive and powerful syntax.
�� Fine-grained Navigation control
Intercept any navigation and precisely control its outcome.
�� Component-based configuration
Map each route to the component that should display.
�� History modes
Choose between HTML5, Hash or Memory history modes.
�� Scroll control
Precisely control the scroll position in every page.
�� Automatic Encoding
Directly use unicode characters (你好) in your code.
Маршрутизация
Одной из традиционных задач в веб-приложении является построение системы маршрутизации. Vue 3 имеет полноценную систему маршрутизации, которая позволяет сопоставлять запросы к приложению с определенными компонентами. За маршрутизацию во Vue 3 отвечает специальная библиотека — vue-router . Стоит отметить, что в Vue 3 и новой версии vue-router организация маршрутизации несколько изменилась по сравнению с предыдущей версий Vue 2 и vue-router. Этот аспект стоит учитывать при возможной миграции приложений со стаой версии фреймворка на новую.
Итак, создадим приложение, которое будет использовать маршруты. Для этого опрделим в каталоге проекта следующий файл index.html :
Маршрутизация во Vue 3 Vue Routing
Прежде всего чтобы использовать маршрутизацию в приложении, в начале файла подключается соответствующая библиотека vue-router:
Важно отметить, что в данном случае мы подключаем 4-ю версию данной библиотеки, которая призвана работать с Vue 3.
В коде javascript вначале определяются два компонента, которые будут обрабатывать запросы по определенным путям:
const Home = < template: 'Home Page
' > const About = < template: 'About Page
' >
Затем определяются маршруты, которые сопоставляют пути запроса и компоненты:
const routes = [ < path: '/', component: Home >, < path: '/about', component: About >];
Каждый маршрут определяет свойство path , которое представляет путь запроса, и свойство component — компонент, который будет обрабатывать запрос по этому пути.
Таким образом, компонент Home будет обрабатывать запрос по пути «/», то есть по сути запрос к корню сайта. Компонент About обрабатывает запросы по пути «/about». Причем когда приложение получит запрос, то этот запрос будет последовательно сопоставляться со всеми маршрутами. Первый маршрут, у которого свойство path совпадет с путем запроса и будет выбран для обработки.
Затем создается объект маршрутизатора с помощью функции VueRouter.createRouter() , которая поставляется библиотекой vue-router. Функция VueRouter.createRouter() в качестве параметра принимает объект с множеством опций, из которых нам необходимо установить как минимум две:
const router = VueRouter.createRouter(< history: VueRouter.createWebHistory(), routes, >);
Первая опция — history указывает на режим навигации. В данном случае в качестве значения она принимает результат функции VueRouter.createWebHistory() , которая устанавливает обычный режим навигации HTML5 (без хеш-символов #).
Вторая опция задает используемые маршруты. В данном случае это ранее определенные маршруты routes.
И в конце объект маршрутизатора передается в объекту приложения Vue с помощью метода use() :
app.use(router);
И кроме того, в шаблоне приложения Vue помещается компонент router-view:
В этот элемент и будет рендериться выбранный для обработки запроса компонент.
Для полноценного использования маршрутизации предпочтительно запускать приложение Vue 3 на сервере, то есть просто кинуть страницу с кодом в браузер, за исключением отдельных случаев, у нас не получится. Поэтому для запуска будем использовать сервер. В данном случае я возьму Node.js, как наиболее демократичный вариант. Приложение будет очень небольшим, и для тех, кто не знаком с Node.js, я постараюсь максимально описать его работу. Но естественно каждый может выбрать какой-то свой предпочтительный сервер (IIS, Apache и т.д.) или технологию стороны сервера (ASP.NET, PHP, Django, Ruby, JakartaEE и т.д).
Создание серверного приложения на Node.js
Для начала естественно нужно установить Node.js. Как это сделать, описано в статье Что такое Node JS. Начало работы.
После установки Node.js в папке, где располагается файл index.html создадим новый файл app.js
Определим в app.js следующий код:
const http = require("http"); const fs = require("fs"); http.createServer((request, response) => < fs.readFile("index.html", function(error, data)< if(error)< response.end("Ошибка при чтении файла!"); >else < response.end(data); >>); >).listen(3000, function()< console.log("Server started at 3000"); >);
Что здесь происходит? Для получения запросов и отправки ответа по протоколу http нам необходим модуль http , а для считывания файла index.html с жесткого диска необходим модуль fs :
const http = require("http"); const fs = require("fs");
Далее для пролушивания входящих запросов вызывается функция http.createServer() . В качестве параметра она принимает функцию обратного вызова, которая принимает два параметра: request и response. request содержит информацию о запросе, а response управляет ответом пользователю.
http.createServer((request, response) =>Далее функция fs.readFile считывает файл index.html - имя считываемого файла передается в качеств первого параметра. А второй параметр представляет функцию, которая вызывается после обращения к файлу.
fs.readFile("index.html", function(error, data)Считанные данные помещаются в парамер data и с помощью вызова метода response.end(data); отправляются клиенту. В итоге пользователь в своем браузере увидит страницу index.html.
Далее вызывается функция listen() , которая начинает прослушивание входящих запросов по порту 3000:
listen(3000, function()< console.log("Server started at 3000"); >)Запустим файл app.js на выполнение. Для этого перейдем к командной строке/консоли с помощью команды cd к папке проекта и для запуска приложения Node.js выполним команду
node app.js
После того на консоли появится сообщение от приложения "Server started at 3000", мы сможем обратиться к приложению по адресу localhost:3000/.
По умолчанию будет идти запрос к корню приложению, поэтому такой запрос будет обрабатываться компонентом Home:
А если мы обратимся по пути "/about", то запрос будет обработан компонентом About:
