Vue：将链接传递到组件问题

qxgroojn 于 2021-06-04 发布在 Vue.js

关注(0)|答案(2)|浏览(257)

为什么这个不管用？
子组件：

<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

来源：https://stackoverflow.com/questions/74761577/vue-passing-a-link-to-components-prob

2条答案

按热度按时间

7bsow1i61#

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

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

Vue Mustache语法，即{{}}仅在HTML标记内工作，如

<div>{{val}}</div>

要调用一个事件，您可以简单地如下运行

<div @click="any valid js syntex">Hello</div>

赞(0）回复(0）举报 2022-12-14

mbyulnm02#

您已经在子组件中将link定义为静态属性，因此不必在/mainview两边添加单引号：

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

只有当prop是动态prop（例如:link="'/mainview'"）时才有必要，但在这种情况下，由于您直接在prop中定义/mainview，因此可以省略单引号（静态Props与动态props）。此外，您可以将link直接传递给@click事件，如下所示：

<button class="btn" @click="router.push(link)">{{ text }}</button>

或者仅使用路由器链路：

<router-link :to="link">
    <button class="btn">{{ text }}</button>
</router-link>

赞(0）回复(0）举报 2022-12-14

我来回答

Vue：将链接传递到组件问题

2条答案

相关问题

热门标签

最新问答