Заголовок страницы - это жизненно важный способ идентификации текущей просматриваемой страницы, а также весьма полезный для SEO, и то же самое относится к метатегам, поскольку все они являются свойствами страницы, на страницах, обслуживаемых сервером, элемент заголовка, а также метатеги могут быть динамически заполнены до того, как он был доставлен пользователю, но когда вы обслуживаете свою страницу во внешнем интерфейсе, это не совсем просто.
В этой статье я расскажу, как решать эти проблемы специально в VueJS и с помощью миксинов, чтобы узнать больше о миксинах VueJS, вы можете ознакомиться с официальной документацией миксинов VueJS.
Миксины - это гибкий способ распространения многоразовых функций для компонентов Vue.
Примеси Vue в основном позволяют вам определять повторно используемый объект js компонента vue, который при использовании будет объединен с вашим объектом компонента. Вы можете определять на основе данных, наблюдать, создавать, монтировать и т. Д., И содержимое соответствующего объекта объединяется с соответствующим компонентом vue, который используются миксины.
Хватит разговоров, давайте перейдем к собственно кодированию. Сначала мы создадим pagePropertiesMixins.js с приведенным ниже кодом:
export default { data: () => { return { pageTitle: '', pageMeta: [], } }, watch: { pageTitle(title) { if (title) { document.title = title; } }, pageMeta(meta) { if (Array.isArray(meta) && meta.length) { document.head.querySelectorAll('[data-vue-router-controlled]').forEach((element, index, elements) => { document.head.removeChild(element); }); document.head.removeChild(document.head.querySelector('[name="description"]')); meta.map(tagDef => { const tag = document.createElement('meta'); Object.keys(tagDef).forEach(key => { tag.setAttribute(key, tagDef[key]); }); tag.setAttribute('data-vue-router-controlled', ''); return tag; }).forEach(tag => document.head.appendChild(tag)); } } } }
Итак, теперь, когда это сделано, у вас есть возможность добавить миксины глобально в ваш main.js, хотя я предпочитаю импортировать и использовать их внутри компонента, как показано ниже:
import PagePropertiesMixin from "../mixins/pagePropertiesMixin"; export default { mixins: [PagePropertiesMixin], data: () => { return { pageTitle: '', pageMeta: [], product: {}, } }, mounted() { const productApi = new ProductApi(); const pathname = window.location.pathname; productApi.getProductDetails(`${window.location.pathname}`.replace('/products/', ''), response => { this.product = response; this.pageTitle = `Buy ${this.product.title} - Ovaboss`; this.pageMeta = [ { name: 'description', content: `${this.product.summary}` }, { property: 'og:description', content: `${this.product.summary}` } ]; }); }, }
Для краткости представлен только скриптовый раздел компонента.
Вышеупомянутое представляет собой реальную реализацию SPA или MPA на базе vue, при этом заголовок и метатеги все еще обновляются, как если бы они обслуживались непосредственно с сервера.
И все, довольно просто и понятно. Спасибо за ваше время.