[Vue-Router] Как вызвать обновление TITLE из компонента?

В Vue.js существует возможность обновления значения заголовка страницы (TITLE) при переходе на другой маршрут (route) с использованием Vue Router.

Для того чтобы вызвать обновление TITLE из компонента, необходимо выполнить следующие шаги:

1. Установите пакет Vue Router, если его еще нет в вашем проекте. Это можно сделать с помощью менеджера пакетов npm или yarn, введя команду:

npm install vue-router

или

yarn add vue-router

2. В вашем приложении Vue.js создайте файл для маршрутизации (например, router.js) и добавьте в него следующий код:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: 'Главная страница' // Здесь можете указать свое значение заголовка
    }
  },
  // Добавьте остальные маршруты вашего приложения
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

// Обновляем TITLE при каждом переходе на новый маршрут
router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'Мой сайт'; // Если для маршрута не указан заголовок, используется заголовок по умолчанию
  next();
});

export default router;

3. В вашем корневом компоненте (например, App.vue) добавьте следующий компонент маршрутизации:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import router from './router';

export default {
  name: 'App',
  router,
};
</script>

4. Добавьте ваши компоненты для каждого маршрута в их соответствующих компонентах:

<template>
  <div class="home">
    <h1>Добро пожаловать на главную страницу!</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
  metaInfo: {
    title: 'Главная страница' // Если хотите задать заголовок только для этой страницы
  }
};
</script>

Теперь, когда вы переходите на другой маршрут, значение заголовка страницы (TITLE) будет автоматически обновляться в соответствии с указанным в маршруте или компоненте значением.

Заметьте, что при использовании Vue Router следует аккуратно обрабатывать имена маршрутов и параметры, чтобы они не конфликтовали с другими частями приложения. Кроме того, для обновления значения заголовка можно использовать дополнительные методы, такие как использование глобальных событий или Vuex для управления состоянием заголовка. Однако, описанный выше способ является простым и быстрым, и подойдет для большинства случаев.