Установка Vue router 4

Установка vue router

Итак, давайте рассмотрим, как мы можем установить Vue router версии 4 в наш проект, который работает на основе системы сборки. Для этого в документации переходим в раздел "Guide", инсталляция (installation). Здесь есть способы, как мы можем установить этот проект: с помощью CDN, Direct download, и с помощью пакетных менеджеров. 

Сейчас мы с вами рассмотрим способ, как это можно сделать с помощью пакетных менеджеров, и в данном случае мы с вами используем пакет менеджер npm.

Копируем вот эту команду:

npm install vue-router@4

Всё достаточно просто. Переходим в наш Vue проект и выполняем ее в терминале. Собственно говоря, всё. Пакет установлен.

Создание и подключение файла router.js

И теперь мы можем с вами настраивать наш роутинг. Самый главный файл роутинга, который нам потребуется - это файл `router.js`, который должен находиться где-то в папке `src`. 

Вы можете либо создать для него какую-то отдельную директорию "router", либо можете просто прямо в корне проекта создать файл `router.js` и в дальнейшем его экспортировать в ваш проект.

То есть, у меня появился в моём проекте файл `router.js`, и минимальное содержимое этого файла выглядит вот следующим образом:

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({

  history: createWebHistory(),

  routes: [

    // здесь описываем маршруты

  ],

});

export default router;

То есть, мы обращаемся к нашему пакету Vue Router и выбираем оттуда методы:

`createRouter` - создаём роутер, который будет использоваться в нашем приложении.

`createWebHistory` - ключ `history` означает, каким образом будут формироваться URL адреса, по которым мы будем с вами переходить.

В `routes` будут находиться те роуты, по которым мы с вами можем переходить.

Теперь нам потребуется файл `main.js`, в котором мы должны импортировать вот этот файл роутер, чтобы его увидел наш Vue проект и начал использовать в своей работе. Соответственно, мы его просто импортируем:

import { createApp } from 'vue';

import App from './App.vue';

import router from './router';

createApp(App).use(router).mount('#app');

По сути, просто импортируется содержимое файла router.js в файл main.js.

Всё, что нам нужно теперь сделать, это сказать Vue, чтобы он этот роутер использовал в своей работе. Vue, с помощью метода `use`:

Про элемент router-view

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

<router-view></router-view>

<router-view> - это тот элемент, куда монтируются все файлы, которые будет нам отдавать роутинг. Те компоненты, которые будут нам отдавать роутинг, они будут монтироваться в это место.

Итого, в файле `App.vue` мы с вами прописываем наши роуты. 

Те адреса, которые будут доступны в нашем приложении. И мы подключаем этот роутинг в главном компоненте `App.vue`. По этим роутам можем переходить. Если не удалить, она будет повторяться каждый раз, когда мы будем переходить по каким-то роутам.

Ну вот такая пока заготовка. Давайте на этом завершим, и в следующем видео посмотрим, что же собой представляют Vue роуты и каким образом их мы можем создать.