Vue：将链接传递给组件问题答案

【问题标题】：Vue: Passing a link to components probVue：将链接传递给组件问题
【发布时间】：2022-12-11 22:48:48
【问题描述】：

为什么这不起作用？

子组件：

<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>

父组件：

<Button text="To MainView" link="'/mainview'"></Button>

传递文本有效，传递链接也在控制台 (/mainview) 中显示正确的字符串，但它向我显示的链接是 http://localhost:8080/%7B%7Blink%7D%7D。

现在我很困惑，因为在我看来它应该有效。谢谢！

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

在您的代码中，这一行 @click="router.push('{{link}}')" 不是那样工作的。你可以这样写

@click="router.push(`${link}`)"

【讨论】：