Laravel vue не возвращает метатеги

Question

Я указал мета в моем vue-router, но он не возвращается в моем HTML

код

router sample

{
            path: '/',
            name: 'home',
            component: Home,
            meta: {
                title: 'Home Page - Welcome',
                metaTags: [
                  {
                    name: 'description',
                    content: 'The home page of our example app.'
                  },
                  {
                    property: 'og:description',
                    content: 'The home page of our example app.'
                  }
                ]
            }
        },
        {
            path: '/login',
            name: 'login',
            component: Login,
            meta: { title: 'Login' }
        },

beforeeach

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (localStorage.getItem('myApp.jwt') == null) {
            next({
                path: '/login',
                params: { nextUrl: to.fullPath }
            })
        } else {
            let user = JSON.parse(localStorage.getItem('myApp.user'))
            if (to.matched.some(record => record.meta.is_admin)) {
                if (user.is_admin == 1) {
                    next()
                }
                else {
                    next({ name: 'userboard' })
                }
            }
            next()
        }
    } else {
        next()
    }
});

Вот так выглядит моя страница:

и никаких признаков мета в браузере:

Вопросы

1. Как решить эту проблему?
2. Как я могу получить заголовок для динамических страниц, таких как компоненты одного сообщения?

..........

Answer 1

Вам необходимо добавить способ обновления тегов в DOM, так как vue-router не сделает этого для вас из коробки.

Вы можете попробовать добавить послекрючок с чем-то вроде:

router.afterEach((to, from) => {

    document.title = to.meta && to.meta.title ? to.meta.title : ''; // You can add a default here

    Array.from(document.querySelectorAll('[data-vue-meta]')).map(el => el.parentNode.removeChild(el));

    if (to.meta && to.meta.metaTags) {
        to.meta.metaTags.map(tagDef => {
            let tag = document.createElement('meta');

            Object.keys(tagDef).forEach(key => tag.setAttribute(key, tagDef[key]));

            tag.setAttribute('data-vue-meta', '');

            return tag;
        }).forEach(tag => document.head.appendChild(tag));
    }
});