Vue router: как динамически генерировать заголовки страниц для динамических маршрутов?

Установите meta в beforeEach навигационном щитке маршрутизатора:

router.beforeEach((to, from, next) => {
  to.meta.title = to.params.project_name_slug;
  next();
});

-or-

Вы можете использовать beforeRouteEnter и beforeRouteUpdate внутрикомпонентные защитные устройства < / а>:

export default {
  ...
  beforeRouteEnter(to, from, next) {
    to.meta.title = to.params.project_name_slug;
    next();
  },
  beforeRouteUpdate(to, from, next) {
    to.meta.title = to.params.project_name_slug;
    next();
  }
}

const DEFAULT_TITLE = "my blog";
router.afterEach((to, from) => {
    // document.title = to.meta.title || DEFAULT_TITLE;
    document.title = "my blog - " + to.meta.title || DEFAULT_TITLE;
});

Я предполагаю, что вы спрашиваете, как это сделать до инициализации компонента, потому что у вас есть проблемы с SEO, иначе это было бы так же просто, как извлечь его из ответа JSON в вашем запросе axios и использовать document.title = myJson.page_title в компоненте.

Если вашей конечной целью является устранение этого страха из-за проблем с SEO (что совершенно верно), вам необходимо изменить свой подход, чтобы сделать данные JSON доступными до того, как компонент даже будет отрисован.

Я бы посоветовал сделать запрос axios в вашем устройстве навигации по маршруту и ​​заблаговременно увлажнить свойство маршрута, чтобы у вас действительно был доступ к заголовку страницы. Наблюдать:

Обновите свой маршрут, чтобы принять новое метасвойство:

meta: {
  title: "project detail",
  content: []
}

Импортируйте axios в файл, в котором находится ваш навигатор, и выполните запрос axios для извлечения и гидратации content. Вместо этого перейдите с afterEach на beforeEach, чтобы можно было заблокировать рендеринг компонента до тех пор, пока не будут получены ваши данные:

import axios from 'axios'

router.beforeEach(async(to, from, next) => {
  const { response } = await axios.get(`/my/cms/endpoint/${to.params.project_name_slug}`)

  document.title = `my blog - ${response.data.title}`

  to.meta.content = response.data.content

  next()
})

Я сделал некоторые предположения о форме вашего ответа выше, вам нужно будет изменить его, чтобы он соответствовал ответу вашего сервера.

Теперь в вашем компоненте вы сможете получить доступ к this.$route.meta.content, и вы можете использовать это в жизненном цикле mounted для гидратации локального свойства или использовать геттер для его возврата, что, как я полагаю, вы уже делаете что-то подобное:

export default {
  get pageContent () {
    return this.$route.meta.content
  }
}

Это устарело, но на случай, если это кому-то поможет, у меня только что возникла эта проблема, и я нашел комбинацию с использованием router.afterEach для статических заголовков, работавших в сочетании с миксином для динамических заголовков.

В случае, объясненном OP, я бы удалил опору заголовка с любых динамических страниц в маршрутизаторе и в afterEach, просто проверьте наличие meta.title

router.afterEach(to => {
  if (to.meta.title) {
    document.title = `${to.meta.title} - my blog`;
  }
});

Затем создайте простой миксин для других страниц, например:

export default {
  methods: {
    setTitle(str) {
        document.title = `${str} - my blog`
    }
  }
}

Затем на этих динамических страницах вы просто вызываете this.setTitle () с любыми динамическими данными после их загрузки с сервера. Я знаю, что это кажется слишком простым, но это работает. У меня были проблемы со всеми методами beforeEach, которые вы найдете на SO.

Примечание: это не для поисковых роботов или поисковых роботов (для которых я рекомендую prerenderSpa), но дает вам красивые заголовки, историю кнопок назад и закладки.