Does Ionic Vue support router props

[rlouie]

I want to pass data between components, and the regular vue router supports passing props to route components.

Now, this is simply a convenience from just taking the params off the route, but it is nice and clean to just put them on the props. So in theory I should be able to do:

{
  path: '/results/history/:id',
  name: 'ResultHistory',
  component: ResultHistory,
  props: true
},

In my routes, and then just do:

props: {
  id: number
}

in my ResultHistory component, and the vue router would automatically put the value in the prop, so if I visited /results/history/7, i could simply access props.id and the number 7 would be there. Yet, this doesn’t seem to work for me in Ionic.

I can of course still get the params off the route directly, but is there a way to make props work?

[dlodeprojuicer]

I don’t know the answer to this but I am interested to see if the is a solution…

[aaronksaunders]

you are referencing the wrong version of the router documentation, should be using this, https://next.router.vuejs.org/guide/

do you have a small sample project showing this issue?

[rlouie]

You are correct, I did notice that, however that section of the docs appears to be identical for vue router v4: https://next.router.vuejs.org/guide/essentials/passing-props.html#passing-props-to-route-components

I can throw together a simple sample here probably.

[ldebeasi]

Ionic Vue does support router props. Make sure you are on @ionic/vue@5.5.0 and @ionic/vue-router@5.5.0 or newer as those releases fixed a few bugs with this.

[rlouie]

Updated to those new versions and this works fine now. Thanks!

[rlouie]

Actually unfortunately I may have spoken too soon. It does partially work, however function props don’t work, as per the vue router docs: https://next.router.vuejs.org/guide/essentials/passing-props.html#function-mode

If i attempt to do a function for props like in the example, route.params comes back undefined.

function dynamicPropsFn (route) {
  const now = new Date()
  return {
    name: (now.getFullYear() + parseInt(route.params.years)) + '!'
  }
}

I wanted to be able to convert an id to a number, but it seems i can’t, at least on with the way it works right now.

You can seen an official example here:

vuejs/vue-router/blob/2c757a1cdc3aa8d55c3e3e22788a89f2351e58a0/examples/route-props/app.js

[ldebeasi]

Thanks! Looks like the issue is on our end. We should be providing the injected route, not matchedRouteRef here: https://github.com/ionic-team/ionic-framework/blob/4f4f31b65e48294c3130ff24ae00b1a2aa1f9d31/packages/vue/src/components/IonRouterOutlet.ts#L384

I can merge a fix in tomorrow, but as a temporary workaround you can inject the route yourself.

import { routeLocationKey } from 'vue-router';
import { inject } from 'vue';

function dynamicPropsFn () {
  const now = new Date()
  const route = inject(routeLocationKey);
  return {
    name: (now.getFullYear() + parseInt(route.params.years)) + '!'
  }
}

[rlouie]

Thanks so much for the fast reply!

[ldebeasi]

Created a PR here: https://github.com/ionic-team/ionic-framework/pull/22605

A fix should be available in one of the upcoming releases of Ionic Framework.