Vue路由器链接按钮组件答案

【问题标题】：Vue router link button componentVue路由器链接按钮组件
【发布时间】：2020-01-08 09:28:42
【问题描述】：

我正在使用 Vue 构建简单的按钮组件。我正在尝试在组件中存储一个道具“链接”。

然后在父组件中我只想使用按钮组件，比如：

<btn :link="page link" />

我可以用简单的“a”标签来做到这一点，但我想用路由器推送来触发我的页面转换。也许我在编写组件时做错了什么。如果有人有不同的想法，我可以。

我需要一个按钮组件，在父组件中我将链接作为数据传递。

<script>
export default {
	props: {
		link: {
			type: String,
			required: false,
		},
	},
}
</script>

<template>
	<div class="btn" @click="$router.push(link)">
		<slot>btn text</slot>
	</div>
</template>

【问题讨论】：

【解决方案1】：

我不知道，但我在父级中传递链接数据时使用 ':' 并且应该没有它，因为我没有绑定任何内容。所以工作代码现在看起来像这样

<script>
export default {
	props: {
		link: {
			type: String,
			required: true,
		},
	},
}
</script>

<template>
	<div class="btn" @click="$router.push(link)">
		<slot>btn text</slot>
	</div>
</template>

在父组件中我只是这样称呼它

<btn link="contact" />  // go to contact page

【讨论】：