Обычный сайт на 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» являлся голым спецификатором, но не был переназначен на что-либо. Связанные спецификаторы модуля должны начинаться с «./», «../» или «/».
