Difference between revisions of "Vuelinksnip"
Jump to navigation
Jump to search
Line 19: | 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>