Vue.js router-link 在 firefox 上不工作

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 道具，在那种情况下我使用路由器 - link 而不是文本。

当我这样使用它时：

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

在 chrome 上它工作正常，但在 FF 上 url 发生变化但它保持在同一页面上。

Answer 1

显然，如果将路由器 link 嵌套在按钮元素下，它就不起作用了。

所以我将组件更改为如下所示：

<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 router-link 在 firefox 上不工作

Vue.js router-link doesn't work on firefox

vue.js

vue-router