Пытаюсь вывести title и т.д. для каждой страницы через vue3, vueuse/head, как правильно сделать?

Question

Антон Вебсайтовский @ws17

Vue.js

Пытаюсь вывести title и т.д. для каждой страницы через vue3, vueuse/head, как правильно сделать?

Обычный сайт на html, есть две страницы, главная и контакты, изучаю vue3, на данный момент сделал подгрузку страниц из файлов при переходе по ссылкам. Хотел вывести для каждой странице свои title и т.д.

Html

<!doctype html>
<html lang="ru">

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0">

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

    <script src="https://unpkg.com/@vueuse/head"></script>
    <script type="module" src="main.js" defer></script>
  </head>

  <body>
    <div id="app">
      <nav>
        <router-link to="/">Главная</router-link> |
        <router-link to="/contacts">Контакты</router-link>
      </nav>

      <!-- Место для отображения содержимого текущего маршрута -->
      <router-view></router-view>
    </div>
  </body>

</html>

Main.js

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')
		useHead({
			title: 'Главная страница - Vue3 тест',
			meta: [
				{ name: 'description', content: 'Описание главной страницы' },
				{ name: 'keywords', content: 'ключевые слова для главной страницы' },
			],
		})
	},
	template: `<div v-html="content"></div>`,
}

const Contacts = {
	data() {
		return {
			content: '',
		}
	},
	async mounted() {
		this.content = await loadTemplate('/contacts.php')
		useHead({
			title: 'Контакты - Vue3 тест',
			meta: [
				{ name: 'description', content: 'Описание страницы контактов' },
				{ name: 'keywords', content: 'ключевые слова для страницы контактов' },
			],
		})
	},
	template: `<div v-html="content"></div>`,
}

const routes = [
	{ path: '/', component: Home },
	{ path: '/contacts', component: Contacts },
]

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

useHead({
	title: 'Vue3 тест',
	meta: [
		{ name: 'description', content: '' },
		{ name: 'keywords', content: '' },
		{ name: 'author', content: '' },
		{ name: 'copyright', content: '' },
		{ name: 'robots', content: 'index, follow' },
	],
	link: [{ rel: 'stylesheet', href: '/media/css/st.css' }],
})

const app = createApp({})
app.use(router).mount('#app')

Получаю в консоле разные ошибки.

Ресурс с «https://unpkg.com/@vueuse/head@2.0.0/dist/index.cjs» был заблокирован из-за несоответствия MIME-типа («text/plain») (X-Content-Type-Options: nosniff).

Uncaught TypeError: Спецификатор «@vueuse/head» являлся голым спецификатором, но не был переназначен на что-либо. Связанные спецификаторы модуля должны начинаться с «./», «../» или «/».

Вопрос задан 15 февр.
120 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Answer 1 · 2025-02-20 13:48:15

Поставил сборку: src, и решение вывода title и т.д.

Устанавливаем пакет:
npm install @vueuse/head

В main.js
Добавляем:

import { createHead } from '@vueuse/head'
const head = createHead()
app.use(head)

В App.vue
Добавляем:

<script setup>
import { useHead } from '@vueuse/head'
import { useRoute } from 'vue-router'

const route = useRoute()

useHead({
	title: () => route.meta.title,
	meta: [
		{
			name: 'description',
			content: () => route.meta.description,
		},
		{
			name: 'keywords',
			content: () => route.meta.keywords,
		},
	],
})
</script>

index.js
В маршруты добавляем данные которые выводим

routes: [
		{
			path: '/',
			name: 'home',
			components: {
				//default: HomeView, // Основной компонент
				homeText: homeText, // Дополнительный компонент для отдельного блока
			},
			meta: {
				title: 'Главная страница - Мой сайт',
				description: 'Описание главной страницы',
				keywords: 'ключевые слова, для, главной, страницы',
			},
		},

Пытаюсь вывести title и т.д. для каждой страницы через vue3, vueuse/head, как правильно сделать?

Войдите на сайт