VueJS метаданные роутера - PullRequest
Новая
       13

VueJS метаданные роутера

0 голосов
/ 11 марта 2020

Я пытаюсь изменить заголовок и описание, метатеги tweeter, fb, ig для приложения в Vue JS (одностраничное приложение). Я успешно получил заголовок для изменения от страницы к странице, установив его в свойстве meta моего роутера. js файл. Однако, если страница (компонент) используется для чего-то вроде сообщения в блоге, мне нужно динамически изменять тег заголовка, описание и другие метатеги при смене навигации. Я так и сделал. 

export default {
    name: "Home",
    beforeRouteEnter(to, from, next){
        to.meta.title = "FTW!";
        next();
    },
    beforeRouteUpdate(to,from,next){
        to.meta.title = "FTW!";
        next();
    }
}

При проверке вкладки Vuejs в инструментах разработчика chrome я вижу, что маршрутизатор фактически обновил значение заголовка, но не отображается в окне браузера, я думаю, мне нужно вызвать refre sh событие или что-то, но мне было интересно, если кто-нибудь из вас знает, как правильно это сделать.

Это упрощенный пример, я бы взял пост в блоге из API и изменил бы meta.title на основе ответа.

Ответы [ 2 ]

0 голосов
/ 12 марта 2020

В vue - мета-поля не используют его для изменения мета-тегов, они используются для других случаев, например, для мета-метки необходимо знать, когда для маршрута требуется аутентификация

Подробнее: Маршрутные мета-поля

Вы можете использовать document.title, и это меняет вкладку заголовка, НО, которая не гарантирует, что боты (google / fb / tw) могут читать их динамические метаданные c, потому что они сканируют до того, как ваша страница их применяет

В настоящее время трудно обработать JavaScript, и не все сканеры поисковых систем могут обработать его успешно или сразу. В будущем мы надеемся, что эта проблема может быть исправлена, но в то же время мы рекомендуем динамический рендеринг c в качестве обходного решения этой проблемы. Динамическое отображение c означает переключение между отображаемым на стороне клиента и предварительно отображаемым содержимым для указанных c пользовательских агентов.

https://developers.google.com/search/docs/guides/dynamic-rendering

Если вы хотите использовать метаданные Dynami c, тогда вам нужно использовать SSR вместо SPA

Лучше SEO, так как сканеры поисковых систем будут непосредственно видеть полностью визуализированную страницу.

Обратите внимание, что На данный момент Google и Bing могут индексировать синхронные JavaScript приложения просто отлично. Синхронное время является ключевым словом там. Если ваше приложение запускается с загрузчиком, а затем загружает контент через Ajax, программа-обходчик не будет ждать, пока вы завершите sh. Это означает, что если у вас есть контент, извлекаемый асинхронно на страницах, где важен SEO, SSR может понадобиться.

https://ssr.vuejs.org/#what -is-server-side-render-ssr

Затем вы можете использовать пакет vue -server-renderer, nuxt или quasar

  1. vue -server-renderer
  2. nuxt js
  3. квазар
0 голосов
/ 12 марта 2020

Динамическое изменение в зависимости от маршрута легко, просто получите доступ к заголовку документа, пока вы устанавливаете метаданные.

Вы можете сделать что-то вроде этого: 

beforeRouteEnter(to, from, next){
        to.meta.title = "FTW!";
        document.title = to.meta.title;
        next();
    },
...