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

您好，Zuber仅使用一个简单的nuxt-link路由器组件。

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

希望它的帮助。

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

1 个答案: