const { createApp } = Vue
const { createRouter, createWebHistory } = VueRouter
const { useTitle } = window.VueUse
// Функция для загрузки шаблонов
function loadTemplate(url) {
return fetch(url)
.then(response => response.text())
.catch(() => '<div>Ошибка загрузки контента</div>')
}
// Компонент для главной страницы
const Home = {
setup() {
const title = useTitle('Главная страница') // Устанавливаем заголовок
return { title }
},
async mounted() {
this.content = await loadTemplate('/main.php')
},
template: `<div v-html="content"></div>`,
}
// Компонент для страницы контактов
const Contacts = {
setup() {
const title = useTitle('Контакты') // Устанавливаем заголовок
return { title }
},
async mounted() {
this.content = await loadTemplate('/contacts.php')
},
template: `<div v-html="content"></div>`,
}
// Настройка маршрутов
const routes = [
{ path: '/', component: Home },
{ path: '/contacts', component: Contacts },
]
// Создание роутера
const router = createRouter({
history: createWebHistory(),
routes,
})
// Глобальное отслеживание изменения маршрута
router.afterEach(to => {
const title = to.meta.title || 'Мой сайт' // Используйте meta-поля в маршрутах
useTitle(title) // Обновляем заголовок
})
// Создание Vue приложения
createApp({}).use(router).mount('#app')const { createApp } = Vue
const { createRouter, createWebHistory } = VueRouter
const { useTitle } = window.VueUse
// Функция для загрузки шаблонов
function loadTemplate(url) {
return fetch(url)
.then(response => response.text())
.catch(() => '<div>Ошибка загрузки контента</div>')
}
// Компонент для главной страницы
const Home = {
setup() {
const title = useTitle('Главная страница') // Устанавливаем заголовок
return { title }
},
async mounted() {
this.content = await loadTemplate('/main.php')
},
template: `<div v-html="content"></div>`,
}
// Компонент для страницы контактов
const Contacts = {
setup() {
const title = useTitle('Контакты') // Устанавливаем заголовок
// Устанавливаем description и keywords
const metaDescription = document.querySelector('meta[name="description"]')
const metaKeywords = document.querySelector('meta[name="keywords"]')
if (metaDescription) {
metaDescription.setAttribute('content', 'Описание главной страницы')
}
if (metaKeywords) {
metaKeywords.setAttribute('content', 'нумерология, калькуляторы, главная')
}
return { title }
},
async mounted() {
this.content = await loadTemplate('/contacts.php')
},
template: `<div v-html="content"></div>`,
}
// Настройка маршрутов
const routes = [
{
path: '/',
component: Home,
meta: {
title: 'Главная страница',
description: 'Описание главной страницы',
keywords: 'нумерология, калькуляторы, главная',
},
},
{
path: '/contacts',
component: Contacts,
meta: {
title: 'Контакты',
description: 'Описание страницы контактов',
keywords: 'нумерология, контакты',
},
},
]
// Создание роутера
const router = createRouter({
history: createWebHistory(),
routes,
})
// Глобальное отслеживание изменения маршрута
router.afterEach(to => {
// Устанавливаем заголовок страницы
const title = to.meta.title || 'Нумерология - калькуляторы'
useTitle(title)
// Устанавливаем description и keywords
const metaDescription = document.querySelector('meta[name="description"]')
const metaKeywords = document.querySelector('meta[name="keywords"]')
if (metaDescription) {
metaDescription.setAttribute(
'content',
to.meta.description || 'Описание по умолчанию'
)
}
if (metaKeywords) {
metaKeywords.setAttribute(
'content',
to.meta.keywords || 'ключевые слова по умолчанию'
)
}
})
// Создание Vue приложения
createApp({}).use(router).mount('#app').jqaccmenu ul ul.submenu li ul.submenu {
width: 100%;
display: none;
position: static;
}