Заголовок страницы - это жизненно важный способ идентификации текущей просматриваемой страницы, а также весьма полезный для 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, при этом заголовок и метатеги все еще обновляются, как если бы они обслуживались непосредственно с сервера.

И все, довольно просто и понятно. Спасибо за ваше время.