Как правильно обозначить Title у динамических страниц во VueJS?

Question

[wickinats]

// Router
{
    path: '/user/:id',
    name: 'User',
    component: User,

    meta: { title: ЗДЕСЬ НУЖНО ОБОЗНАЧИТЬ ID пользователя }
 }

Также хотелось бы узнать о том, как наиболее правильно указать title страницы во Vue? Сейчас использую следующую конструкцию.

// App.vue
  import Menu from './components/Menu'

  export default {
    name: 'Artefact',
    components: {
      Menu
    },

    computed: {
      pageTitle() { return this.$route.meta.title; }
    },

    watch: {
      pageTitle: (val) => {
        document.title = val;
      }
    }, created() {
      document.title = this.$route.meta.title;
    }
  }

Comments

[fynduck]

https://github.com/nuxt/vue-meta

Answer 1

[Dimasik30]

Использовать vue-meta

Answer 2

[Михаил Захаров]

Vue-headful. Вставляешь в любой компонент и он сам меняет и тайтл, и описание, если надо
https://github.com/troxler/vue-headful/blob/master...

Answer 3

[wickinats]

>> После тестов выяснилось, что это подходит только для статики.

Спасибо за ответы. Только сейчас зашёл на данный ресурс и только недавно закончил реализацию вот такого простого метода изменения Title через vue-компоненту с css-директивой display, выставленной в none.

<template>
  <div>

  </div>
</template>

<script>
export default {
  name: 'Title',
  props: {
    name: String
  },

  beforeMount() { document.title = this.name },
  beforeUpdate() { document.title = this.name }
}
</script>

<style lang="scss" scoped>
  div { display: none; }
</style>

>>> Новый скрипт для динамического изменения Title:

<!-- Title.vue -->
<template>
  <div>
    {{ Title }}
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: 'Title',
    computed: mapState([ 'Title' ]),

    beforeMount() { document.title = this.Title },
    beforeUpdate() { document.title = this.Title }
  }
</script>

<style lang="scss" scoped>
  div { display: none; }
</style>

// App.vue
  import Menu from './components/Menu'
  import { mapState } from 'vuex';


  export default {
    name: 'Artefact',
    components: {
      Menu
    },
    
    computed: mapState([ 'Title' ]),
    watch: {
      Title(value) { document.title = value; } 
    }, created() {
      document.title = this.Title;
    }
  }

// Store
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    Title: 'SSS+'
  }
})

Answer 4

[Stas Sych]

Почему бы не использовать router.beforeEach
Это вас избавит и от competed i от watch
https://router.vuejs.org/ru/guide/advanced/navigat...

Answer 5

[Ibishka]

// App.vue
  import Menu from './components/Menu'

  export default {
    name: 'Artefact',
    components: {
      Menu
    },
    methods: {
      getPost() {
        fetch('db.json')
          .then(res => res.json())
          .then(users=> {
document.title = `user ${users.id}`;
.......
        })
      }
    },
    created() {
      this.getPost()
    }
  }

Comments

[wickinats]

А можно ли узнать вообще схему подобного рода действия? Ибо мне кажется, что данный способ является куда большим костылём, чем тот которым я пользуюсь. Разве он не увеличит количество запросов на сервер, а значит не приведёт ли он к куда более худшей сетевой оптимизации?

[Ibishka]

wickinats, https://ru.vuejs.org/v2/cookbook/serverless-blog.html
Когда берёшь данные там же пишешь document.title = 'blablabla'