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

В традиционных веб-приложениях при переходе на новую страницу браузер перезагружает всю страницу и загружает новый HTML-файл. В одностраничных приложениях (SPA), которые мы создаём с Vue, всё происходит динамически. Vue Router просто меняет компоненты, которые рендерятся, на основе URL, не перегружая страницу.

Установка Vue Router

Первым шагом будет установка Vue Router в ваш проект. Если вы использовали Vite для создания вашего приложения (а это, скорее всего, так), просто установим его через npm:

npm install vue-router@next

Настройка Vue Router

После установки нам нужно подключить маршрутизатор к нашему приложению. Создадим файл router.js:

src/router.jsimport { createRouter, createWebHistory } from 'vue-router';
import User from './components/User.vue';
import Worker from './components/Worker.vue';

const routes = [
    {
        path: '/worker',
        name: 'Worker',
        component: Worker
    },
    {
        path: '/user',
        name: 'User',
        component: User
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

Здесь мы создаём маршрутизатор с двумя простыми маршрутами: /worker для работников и /user для пользователей. Компоненты User и Worker будут рендериться в зависимости от того, по какому URL-адресу вы переходите.

Теперь нам нужно подключить маршрутизатор к приложению в файле main.js и приложение будет знать, как обрабатывать маршруты:

main.jsimport { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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