Tengo un front con VueJs y como template estoy utilizando inspinia.
{{--SECTION TITLE--}}
<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>Title</h2>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Home</a>
</li>
<li class="breadcrumb-item">
<a>Extra Pages</a>
</li>
<li class="breadcrumb-item active">
<strong>Profile</strong>
</li>
</ol>
</div>
</div>
{{--MAIN CONTENT--}}
<div class="wrapper wrapper-content">
<router-view ></router-view>
</div>
El código anterior esta divido en dos, el contenido principal que se muestra en el router view y la parte de arriba que tiene:
<h2> Title </h2>
<ol>
<li>
home / section / sub-section
No estoy sabiendo la manera correcta de que el titulo cambie dinamicamente, es decir, si yo accedo a Home, que el titulo de la sección cambie a home, si entro a usuarios que muestre Usuarios y así.
Pensaba en un componente donde se inserte en cada una de las views y por props modificar el título o mixins pero no estoy seguro que sea lo mas óptimo.
Estoy aprendiendo Vuex y no sabría si con esto tambíen se podría resolver el problema!