Vueのpropsで指定したURLに飛びたい

Question

以下のコンポーネント

<template>
  <button class="Button">{{ name }}</button>
</template>
<script>
export default {
  props: ['name', 'url']
}
</script>

このボタンをクリックするとpropsで指定したurlに飛ぶという処理を作りたいのですがどうにもやり方がわかりません。初歩的すぎるのかググっても結果が芳しくないのでteratailで質問した次第です。どなたか教えていただけますでしょうか。

Answer 1

button タグではなく a タグを使ってはどうでしょうか？

<template>
  <a class="btn" v-bind:href="url">{{ name }}</a>
</template>
<script>
export default {
  props: ['name', 'url']
}
</script>
<style>
.btn {
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 20px 10px;
  background-color: #e25c00;
  border: 2px solid transparent;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  color: #fff;
  font-size: 1.125rem;
  text-align: center;
  text-decoration: none;
  transition: .25s;
}

.btn:focus,
.btn:hover {
  background-color: #fff;
  border-color: currentColor;
  color: #e25c00;
}
</style>

なぜこのようにスタイルされているかは、書籍に詳しく書かれています。

• CSS設計完全ガイド サンプルデータサイト