0

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!

1 respuesta 1

1

Se me ocurre crear un watcher en el componente template:

watch: {
  '$route' (to, from) {
    // code aquí
  }
}

Luego, simplemente extraer el pathname de la instancia de $route que mapea al from o simplemente usar el objeto window:

this.title = from.path.split('/').pop()

Por último, agrega una propiedad title y úsala en tu template:

data: () => ({
  ...
  title: 'Default title'
})
1
  • Lo probare y te digo que tal fue, graciaS! Commented el 23 abr. 2019 a las 18:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.