Для установки уникальных метаданных, включая заголовок для каждой страницы, используя Vue 3 и библиотеку `@vueuse/head`, необходимо следовать нескольким шагам. Давайте продолжим ваш код и добавим компонент для страницы контактов, чтобы продемонстрировать, как это работает.
### 1. Завершим ваш файл `main.js`
Ваша текущая реализация для компонента `Home` выглядит хорошо, но нужно добавить компонент для страницы контактов и настроить маршрутизацию. Вот обязательные изменения:
```javascript
import { useHead } from '@vueuse/head'; // Импорт useHead
import { createApp } from 'vue'; // Импорт Vue
import { createRouter, createWebHistory } from 'vue-router'; // Импорт Vue Router
// Компонент для главной страницы
const Home = {
data() {
return {
content: '',
};
},
async mounted() {
this.content = await loadTemplate('/main.php');
},
setup() {
useHead({
title: 'Главная страница - Vue3 тест',
meta: [
{ name: 'description', content: 'Это главная страница нашего сайта на Vue3.' },
],
});
},
template: `<div v-html="content"></div>`, // Используем v-html для отображения содержимого
};
// Компонент для страницы контактов
const Contacts = {
template: `<div>
<h1>Контакты</h1>
<p>Email: contact@example.com</p>
</div>`,
setup() {
useHead({
title: 'Контакты - Vue3 тест',
meta: [
{ name: 'description', content: 'Контактная информация для связи' },
],
});
},
};
// Настройка маршрутизатора
const routes = [
{ path: '/', component: Home },
{ path: '/contacts', component: Contacts },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
// Создание Vue приложения
const app = createApp({});
app.use(router);
app.mount('#app');
```
### 2. Основные изменения и объяснения
1. **Компонент для контактов**: Мы добавили новый компонент `Contacts`, в котором мы также используем `useHead` для задания уникальных метаданных этой страницы.
2. **Маршрутизация**: Мы создали несколько маршрутов: один для главной страницы и один для страницы контактов.
3. **useHead**: В обоих компонентах мы вызываем `useHead` для установки заголовка и метатегов. Это может быть сделано в функции `setup` Vue 3, что позволяет использовать Composition API.
### 3. HTML структура
Ваш HTML остается неизменным, поскольку он уже подготавливает всё необходимое для работы с Vue и Vue Router.
### Заключение
Теперь, когда вы переключаетесь между главной страницей и страницей контактов, заголовки и метаданные будут изменяться в зависимости от контента страницы. Это обеспечит корректное отображение информации о каждой странице как для пользователей, так и для поисковых систем.