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

I have this button component:

<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>


It can accepts a :to prop and in that case I use a router-link instead of just text.

:to

When I use it like this:

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


On chrome it works fine, but on FF the url changes but it stays on the same page.

1 Answer
1

So apparently, it doesn't work of you nest the router link under a button element.

So i changed my component to look like this:

<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>


And now it works.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.