我的Nuxt Button组件没有"href“属性

Question

我使用的是Nuxt，我已经创建了Button组件，如果我们传递道具to，它将生成nuxt-link，如果我们将它设置为href，它将生成a标记。

我面临的问题是，如果我们传递to，它会生成a标记，但是没有href属性。

我的Button.vue文件

<template>
  <component :is="type" :to="to" :href="href" class="btn btn-primary">
    <slot/>
  </component>
</template>
    
<script>
export default {
  props: {
    href: {
      type: String,
      default: null
    },
    to: {
      type: String,
      default: null
    }
  },
  computed: {
    type() {
      if (this.to) {
        return "nuxt-link";
      } else if (this.href) {
        return "a";
      } else {
        return "button";
      }
    }
  }
};
</script>
   
<style scoped>
</style>

我的布局文件

<script>
import Btn from '~/components/Button/Button.vue'
export default {
  components: {
    Btn
  }
}
</script>

<template>
    <b-container>
      <Btn to="/about">I'm a Button</Btn>
    </b-container>
</template>

<style scoped lang="scss">

</style>

Answer 1

嗨，祖伯，只是使用一个简单的努xt-链接路由器组件。

<nuxt-link class="btn btn-primary" to="/about">About</nuxt-link>

希望能帮上忙。