Question

我有这个按钮组件：

    <button :class="classes" v-on="$listeners" v-bind="$attrs">
    <template v-if="to">
      <router-link :to="to" class="flex center-v">
        <AqIcon :icon="icon" v-if="icon" />
        <slot></slot>
      </router-link>

    </template>
    <template v-else>
      <AqIcon :icon="icon" v-if="icon" />
      <slot></slot>
    </template>

  </button>

它可以接受:to道具，在这种情况下，我使用路由链接而不是文本。

当我这样使用它时：

<AqButton primary icon="plus" :to="{name:'editUser',params:{id:'new'}}">
     Add User
</AqButton>

在chrome上可以正常工作，但在FF上可以更改网址，但它会保留在同一页面上。

Answer 1

因此，显然，如果将路由器链接嵌套在按钮元素下，则无法使用。

所以我将组件更改为这样：

<template>
  <router-link v-if="to" :to="to" :class="classes" v-on="$listeners" v-bind="$attrs">
    <AqIcon :icon="icon" v-if="icon" />
    <slot></slot>
  </router-link>

  <button v-else :class="classes" v-on="$listeners" v-bind="$attrs">
    <AqIcon :icon="icon" v-if="icon" />
    <slot></slot>
  </button>

</template>

现在可以使用了。

Vue.js路由器链接在Firefox上不起作用

1 个答案: