How to implement the same header on all pages, but different headers and background images in it (vue.js)?

Question

JavaScript

Good afternoon! Recently working with vue.js and faced such "problem". I have many pages that contain the same header (rendered in the header.vue component), but different text headers and background images in it (the image is rendered via the img tag).
How is this properly implemented in vue.js? I have 20 pages with the same header but different content in it. I will not create 20 templates for the sake of different text titles and background pictures. It would be stupid. I'm sure there is a normal way .... Please help.
PS I would like the most correct and optimal way.

Answer 1

Head-on solution - each page you have contains the connection of all the necessary blocks, and you pass your header through the parameters: https://ru.vuejs.org/v2/guide/components-props.html
Vuex solution: https://vuex .vuejs.org/
Here on each page you write a title instore