How to pass parameter from router to child component on page load?

Question

Vue.js

Hello. There is a parent component, which hosts a child component, to which you need to pass a parameter from the current url (vue-router).

<template>
<favorite-button :userid="userid"/>
</template>
...
<script>
...
mounted() {
    this.userid = this.$route.params.id;
}
...
</script>

The problem is that when the parent component is loaded, undefined arrives in the favorite-button instead of the id specified in the url.

How to fix this problem?

Answer 1

You can't use this inside a component template this time. The second is that the id attribute is an html attribute and cannot be used as props, replace it with route-id for example.
In general, this transfer is meaningless, since you can get the parameter inside