bug: vue-router issue, when changing the route, the "props" method is not called

[maelp]

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

v7.x

Current Behavior

I have this setup:

• a kind of side menu and a main view
• the side menu has a list of items, and when I click on one, it replaces the current view to "viewItem/itemId"
• the router is defined like this (to move route params to props)

  {
    path: "/viewItem/:id",
    component: () =>
      import("@/views/ItemView.vue"),
    props: (route: any) => {
      return { id: route.params.id };
    },
  },

I cannot give an exact reproduction because the actual code is a bit more intricate and it is proprietary, but that's the gist of what I'm doing, I've tried putting up a demo at https://github.com/maelp/issue-ionic-vue-router which seems to reproduce the issue (at least the component doesn't update as it should when I click)

now in the case where:

• a "ItemView" (with eg id=1) is displayed
• I click on "change route to /viewItem/2"

the following happens:

• the browser URL changes to "/viewItem/2"
• the "props" method on the router IS NOT CALLED (if I add a log, it's never displayed)
• therefore the view doesn't update (the component is the same, and props are the same)

not sure what is wrong there?

Expected Behavior

It should call the "props" method on the router, update the props, and therefore update the component

Steps to Reproduce

See above

Code Reproduction URL

https://github.com/maelp/issue-ionic-vue-router

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (/Users/primet/.node/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 7.6.5 (/Users/primet/work/gouach/code/gouach-backend/node_modules/.pnpm/@Ionic[email protected]/node_modules/@ionic/vue)

Capacitor:

Capacitor CLI : 5.6.0
@capacitor/android : 5.6.0 (/Users/primet/work/gouach/code/gouach-backend/node_modules/.pnpm/@capacitor+android@5.6.0_@capacitor[email protected]/node_modules/@capacitor/android)
@capacitor/core : 5.6.0 (/Users/primet/work/gouach/code/gouach-backend/node_modules/.pnpm/@capacitor[email protected]/node_modules/@capacitor/core)
@capacitor/ios : 5.6.0 (/Users/primet/work/gouach/code/gouach-backend/node_modules/.pnpm/@capacitor+ios@5.6.0_@capacitor[email protected]/node_modules/@capacitor/ios)

Utility:

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

System:

NodeJS : v20.10.0 (/Users/primet/.nvm/versions/node/v20.10.0/bin/node)
npm : 10.2.3
OS : macOS

Additional Information

No response

[maelp]

(I'm not sure why something so simple wouldn't work, so perhaps it's me doing it wrong somehow?)

[maelp]

Screen.Recording.2024-01-17.at.17.48.52.mov

In the video you can see me clicking on the items, it changes the URL but not the view

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of #28774. Something in a new version of Vue broke this behavior. Downgrading to Vue 3.3.x for now should avoid the issue.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.