Маршрутизация

Введение в маршрутизацию. Определение маршрутов

Последнее обновление: 04.11.2020

Одной из традиционных задач в веб-приложении является построение системы маршрутизации. Vue 3 имеет полноценную систему маршрутизации, которая позволяет сопоставлять запросы к приложению с определенными компонентами. За маршрутизацию во Vue 3 отвечает специальная библиотека - vue-router. Стоит отметить, что в Vue 3 и новой версии vue-router организация маршрутизации несколько изменилась по сравнению с предыдущей версий Vue 2 и vue-router. Этот аспект стоит учитывать при возможной миграции приложений со стаой версии фреймворка на новую.

Итак, создадим приложение, которое будет использовать маршруты. Для этого опрделим в каталоге проекта следующий файл index.html:

<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация во Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<h1>Vue Routing</h1>
    <router-view></router-view>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script>
// компоненты, которые обрабатывают пути
const Home = { template: '<h2>Home Page</h2>' }
const About = { template: '<h2>About Page</h2>' }
 
// маршруты, сопоставленные с компонентами
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];
// создаем объект маршрутизатора
const router = VueRouter.createRouter({
  // предоставляем реализацию истории посещений
  history: VueRouter.createWebHistory(),
  routes,
});

const app = Vue.createApp({});
// указываем объекту приложения использовать объект маршрутизатора
app.use(router);	
app.mount('#app');
</script>
</body>
</html>

Прежде всего чтобы использовать маршрутизацию в приложении, в начале файла подключается соответствующая библиотека vue-router:

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

Важно отметить, что в данном случае мы подключаем 4-ю версию данной библиотеки, которая призвана работать с Vue 3.

В коде javascript вначале определяются два компонента, которые будут обрабатывать запросы по определенным путям:

const Home = { template: '<h2>Home Page</h2>' }
const About = { template: '<h2>About Page</h2>' }

Затем определяются маршруты, которые сопоставляют пути запроса и компоненты:

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:

<router-view></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:

Назад Содержание Вперед

Помощь сайту

Юмани:

410011174743222

Перевод на карту

Номер карты:

4048415020898850