bug: Vue: Incorrect href [object Object] when using router-link object

Prerequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

When using the router-link attribute on Ionic Vue components (e.g. <ion-button>, <ion-item>), and passing a Vue Router location object such as:

<ion-button :router-link="{ name: 'details' }">Details</ion-button>

the component navigates correctly, but the generated DOM contains incorrect href values.

Both the host element and the internal Shadow DOM anchor render [object Object] instead of the resolved URL.

Example rendered output:

<ion-button routerlink="[object Object]">
  <template shadowrootmode="open">
    <a href="[object Object]" class="button-native">
      <span class="button-inner">...</span>
    </a>
  </template>
  Details
</ion-button>

This results in:

Browser status bar showing [object Object] on hover
Incorrect link preview for assistive technologies
No way to know the actual target URL from DOM
Real href never being exposed, navigation works only via JS event interception

Expected Behavior

Ionic should resolve { name: 'details' } into the actual route URL (e.g. /details) and reflect it either:

on the host element (routerlink="/details")
or on the internal <a> element inside Shadow DOM (href="/details")

So that:

browser hover shows the correct URL
accessibility tools detect the correct destination
the link behaves like a normal anchor
DOM correctly represents the navigation target

Steps to Reproduce

Create an Ionic Vue project.
Add a component using router-link with an object:

<ion-button :router-link="{ name: 'details' }">
  Details
</ion-button>

Hover over the component.
Inspect the DOM.

Result: both the routerlink attribute and the internal <a href> contain [object Object]

Code Reproduction URL

https://v6ckjp.csb.app/

Ionic Info

Ionic:

   Ionic CLI       : 7.2.1
   Ionic Framework : @ionic/vue 8.7.11

Capacitor:

   Capacitor CLI      : 7.4.4
   @capacitor/android : 7.4.4
   @capacitor/core    : 7.4.4
   @capacitor/ios     : 7.4.4

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v22.13.1
   npm    : 10.9.2
   OS     : Linux 6.8

Additional Information

No response

Hi! I’d like to work on this issue.

I’ve reviewed the report and reproduced the [object Object] behavior when passing a Vue Router location object (e.g. { name: "details" }) into router-link on components like ion-button and ion-item. Navigation works correctly, but the rendered DOM does not reflect the resolved URL in either the routerlink attribute or the internal anchor href.

My plan is to:

Inspect how routerLink values are handled inside the Ionic Vue wrapper

Resolve router location objects into actual href strings (e.g. using router.resolve())

Ensure both the host attribute and internal anchor reflect the correct path

Test with named routes, params, and string paths to confirm consistent output

Open a PR once the correct DOM output is verified

Before I begin, I have one quick question:
– Should the resolution logic be applied at the wrapper level for Vue components, or should the internal anchor generator handle object → string conversion?

If this direction looks good, please assign this issue to me. Thanks! 🚀

Thanks for the report, and sorry for the delay.

Verified on 9.0.8. When router-link is given a route location object, @ionic/vue uses the object for navigation, which is why clicking works. It also copies the same object straight into the inner anchor's href without asking Vue Router to resolve it, so the anchor ends up with the text [object Object]. Besides the hover URL, this means ctrl/cmd-clicking to open the link in a new tab loads /[object Object].

Workaround, verified on 9.0.8 with createWebHistory(): resolve the location yourself and pass the resulting string.

<template>
  <ion-button :router-link="router.resolve({ name: 'details' }).href">Details</ion-button>
</template>

<script setup lang="ts">
import { IonButton } from '@ionic/vue';
import { useRouter } from 'vue-router';

const router = useRouter();
</script>

Tracked as a bug in stenciljs/output-targets.

Thanks for your report! This has been fixed in v9.0.10!

fix(vue): render resolved href for object router-link (ionic-team#31663)

Navigation Menu

Repository navigation

bug: Vue: Incorrect href [object Object] when using router-link object #30848

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

bug: Vue: Incorrect href [object Object] when using router-link object #30848

Description

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Activity

Mudavath-kumar commented on Dec 22, 2025

thetaPC commented on Oct 19, 2026

ShaneK commented on Oct 28, 2026

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions