2

Cómo utilizar datos de la instancia Vue en los templates de las rutas de Vue Router.

Este es mi código

HTML

 <div id="app">
        <router-link to="/foo/1">ruta 1</router-link>
        <router-link to="/foo/2">ruta 2</router-link>

        <router-view></router-view>        
  </div>

Javascript

Vue.use(VueRouter);

    const Ruta1 = { template: '<div>{{ $route.params.numruta }}</div>' };
    const Ruta2 = { template: '<div>{{ $route.params.id }}</div>' };
    const router = new VueRouter({
        routes: [
            { path: '/foo/:numruta', component: Ruta1 },
            { path: '/foo/:numruta', component: Ruta2 }
        ]
    });
    const app = new Vue({
        router,
        el: "#app",
        data:{ 
            usuario:"nombre de usuario"
        }
    }).$mount('#app');

En ese caso utilizar el elemento usuario en el templpate de Ruta1

1 respuesta 1

4

Tal y como está, podría facilitarte el trabajo accediendo a la instancia desde el componente, con this.$root , a partir de aquí, tienes acceso a tus métodos y data declarados en tu instancia.

Ejm

Vue.use(VueRouter);
const Ruta1 = { template: '<div>{{this.$root.usuario }}</div>' };
const Ruta2 = { template: '<div>Hola {{this.$root.op }}</div>' };
const router = new VueRouter({
    routes: [
        { path: '/foo/:numruta', component: Ruta1 },
        { path: '/fooo/:numruta', component: Ruta2 }
    ]
});
const app = new Vue({
    router,
    el: "#app",
    data:{ 
        usuario:"Dev. Joel",
        op:"Emiliano",
    }
}).$mount('#app');
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
    <router-link to="/foo/1">Usuario</router-link>
    <router-link to="/fooo/2">OP</router-link>

    <router-view></router-view>        
</div>

Aunque también podría utilizar las props de las rutas definidas para pasar valores directamente.

Vue.use(VueRouter);
const Ruta1 = { props: ['usuario'] , template: '<div>Hola {{ usuario }}</div>' };
const Ruta2 = { props: ['usuario'] , template: '<div>Hola  {{ usuario }}</div>' };

const router = new VueRouter({
    routes: [
        { path: '/uno', component: Ruta1 , props: { usuario: 'StackOverFlowEs' }},
        { path: '/dos', component: Ruta2 , props: { usuario: 'StackOverFlowEn' } }
    ]
});
const app = new Vue({
    router,
    el: "#app"
}).$mount('#app');
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
    <router-link to="/uno">Ruta 1</router-link>
    <router-link to="/dos">Ruta 2</router-link>

    <router-view></router-view>        
</div>

2
  • 1
    props es más especificamente para este caso ¿cierto? mientras que usar this.$root puede ser utilizado en todos los "dominios" de Vue, cómo puede ser un Vue.component ¿es así? Commented el 19 ago. 2018 a las 15:17
  • 2
    Si, props es más especifico. Igual están las dos formas posibles. Saludos
    – Dev. Joel
    Commented el 19 ago. 2018 a las 16:30

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.