Difference between revisions of "Vuelinksnip"

From rbachwiki
Jump to navigation Jump to search
(Created page with "<pre> // this is in the route.js file { path: 'user/:id', component: User}, // to get the info <template> <p>Loaded ID:{{id}}</p> </template> <script> export default { data(...")
 
 
(One intermediate revision by the same user not shown)
Line 2: Line 2:
// this is in the route.js file
// this is in the route.js file
{ path: 'user/:id', component: User},
{ path: 'user/:id', component: User},
---------------------
header has the link with the id
<router-link to="/user/10" tag="li" active-class="active"> <a>User1</a> </router-link>
---------------------------------------


// to get the info
 
// to get the id passed from the header file
<template>
<template>
<p>Loaded ID:{{id}}</p>
<p>Loaded ID:{{id}}</p>
Line 14: Line 19:
     id: this.$route.params.id
     id: this.$route.params.id
   }
   }
},
// the watch is needed otherwise the id would not be updated if it changes
// eg if you had 2 links one with 10 and one with 20 the {{id}} would not change from the 10 to 20 because the page wasn't reloaded
watch:{
'$route'(to, from){
this.id = to.params.id;
}
}
}
</script>
</script>

Latest revision as of 23:57, 17 October 2018

// this is in the route.js file
{ path: 'user/:id', component: User},
---------------------
header has the link with the id
<router-link to="/user/10" tag="li" active-class="active"> <a>User1</a> </router-link>
---------------------------------------


// to get the id passed from the header file
<template>
<p>Loaded ID:{{id}}</p>
</template>

<script>
export default {
data(){
  return{
    id: this.$route.params.id
  }
},
// the watch is needed otherwise the id would not be updated if it changes 
// eg if you had 2 links one with 10 and one with 20 the {{id}} would not change from the 10 to 20 because the page wasn't reloaded
watch:{
 '$route'(to, from){
 this.id = to.params.id;
}
}
</script>


VueJs Routing