How to use Vue instance data in Vue Router route templates.
this is my code
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');
In that case use the element usuario
in the templpate
deRuta1
As it stands, it might make your job easier by accessing the instance from the component, with
this.$root
, from here you have access to your methods and data declared on your instance.eg
Although you could also use those
props
of the defined routes to pass values directly.