ionic-team / ionic-team/ionic-framework

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

Aperta
#30,848 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
triage
Lingua principale
TypeScript
Stelle
52.7k
Fork
13.3k
Merge medio
1g 15h
PR unite (30g)
51

Descrizione

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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. ``,` `), and passing a Vue Router location object such as:

`Details`

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:

```



...


Details

```

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

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

```

Details

```

3. Hover over the component.
4. Inspect the DOM.

Result: both the routerlink attribute and the internal `` 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_

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.