Vue: Passing a link to components prob - vue.js

Question

why does this doesn't work?
Child-Component:
<template>
<button class="btn" #click="router.push('{{link}}')">{{ text }}</button>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
text: String,
link: String,
})
</script>
Parent-Component:
`
<Button text="To MainView" link="'/mainview'"></Button>
`
Passing text works, passing link also shows the right String in Console (/mainview) but the link it shows me is http://localhost:8080/%7B%7Blink%7D%7D.
And now I'm confused because in my understanding it should work. Thanks!

Answer 1

In your code, this line #click="router.push('{{link}}')" don't work like that. You can write like this
#click="$router.push(`${link}`)"
Vue Mustache syntex i.e {{}} only work inside HTML tag like
<div>{{val}}</div>
to call an event you can simply run like below
<div #click="any valid js syntex">Hello</div>

Answer 2

You've already defined link as a static prop in your Child Component so you don't have to add single quotes around /mainview:
<Button text="To MainView" link="/mainview"></Button>
It would only be necessary if the prop is a dynamic prop (ex. :link="'/mainview'") but in this case, since you're defining /mainview directly into the prop then you can omit the single quotes (Static Props vs Dynamic props). Additionally, you can pass link directly to the #click event like so:
<button class="btn" #click="router.push(link)">{{ text }}</button>
or just use router-link instead:
<router-link :to="link">
<button class="btn">{{ text }}</button>
</router-link>