Vue Router является официальным плагином маршрутизации для Vue.js. Для его установки выполните следующую команду:
npm install vue-router@nextСоздание маршрутов
Создайте файл router.js и определите маршруты, связывая их с компонентами:
import { createRouter, createWebHistory } from 'vue-router';
import HomeComponent from './components/HomeComponent.vue';
import AboutComponent from './components/AboutComponent.vue';
const routes = [
{ path: '/', component: HomeComponent },
{ path: '/about', component: AboutComponent },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;Интеграция с Vue.js 3
В файле main.js импортируйте маршрутизатор и добавьте его в экземпляр приложения:
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');Использование маршрутизации в компонентах
Рендеринг маршрутизатора
Для отображения компонентов, связанных с маршрутами, добавьте тег <router-view> в ваш компонент App.vue:
<template>
<div>
<router-view></router-view>
</div>
</template>Навигация между маршрутами
Для создания ссылок на маршруты используйте тег <router-link>:
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
</template>Динамические маршруты
Для создания динамических маршрутов используйте параметры:
const routes = [
// ...
{ path: '/user/:id', component: UserComponent },
];Для доступа к параметрам маршрута используйте route.params:
import { useRoute } from 'vue-router';
export default {
setup() {
const route = useRoute();
const userId = route.params.id;
return {
userId,
};
},
};Vue Router позволяет легко создавать и настраивать маршрутизацию для вашего приложения на Vue.js 3. Он предоставляет удобные инструменты для навигации, работы с динамическими маршрутами и интеграции с компонентами приложения.