Vue.js router-link issue

[depsimon]

It seems like <router-link /> (vue-router-next) doesn't work the same inside a <MenuItem /> as it does outside of it.

Here's a little demo: https://codesandbox.io/s/headlessuivue-menu-example-forked-xiitu

When navigating between Home & About pages from the Menu, the page refreshes completely.
When navigating with the top links it doesn't, as it should be.

Any idea what's happening?

[marianayap]

@depsimon Hello! Is this issue taken? to see if I could work on it

[ftb]

Hi all! any news on this?

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

When I load the sandbox I get an error, is it possible to fix it so that I can take a look?

---

In the meantime, Internally we us a cloneVNode() so that we can clone the passed in child and provide it additional props. I would assume that the router-link would forward all incoming props to the lower level a tag.

[depsimon]

Hmm maybe the Sandbox is fixed now? I had trouble opening it again, but now it seems okay.

[ryzr]

Hey, I was able to get around this by using router-link slots:

<router-link
  v-slot="{ isActive, href, navigate }"
  custom
  :to="...">
  <MenuItem>
    <a
      :href="href"
      @click="navigate" />
  </MenuItem>
</router-link>

It doesn't seem to work if RouterLink is a child to MenuItem. This might be because RouterLink does not have emits: ['click']? I'm not fully across the Vue 3 event system, so I could be wrong here.

[RobinMalfait]

I fixed a sort of related issue earlier (#249), so that we can get access to the underlying DOM node, even when using a custom component.
You can already try it using npm install @headlessui/vue@dev or yarn add @headlessui/vue@dev.

But it seems like the router-link doesn't forward all the props correctly (aka the onClick prop).
The fix @ryzr provided can help you, however make sure to put the @click on the MenuItem (so that we can merge the clicks) instead of on the a tag.

Here is a codesandbox: https://codesandbox.io/s/headlessuivue-menu-example-forked-31t3b?file=/src/components/Menu.vue

[xieyuheng]

My work around is to define a component called Hyperlink

<template>
  <span
    @click="
      typeof $attrs?.href === 'string' && $router.push({ path: $attrs.href })
    "
    ><a><slot /></a
  ></span>
</template>

[bradleybensmith]

This was the only way I could get this to work, using Vue 3.3.4, Vue Router 4.2.4, and Headless UI 1.7.16:

<RouterLink v-slot="{ href, navigate }" :to="{ name: 'admin' }" custom>
    <MenuItem v-slot="{ close }">
        <a :href="href" @click.prevent="navigate();close()">Administration</a>
    </MenuItem>
</RouterLink>