Nested routes removes animation on RouterOutlet component

Ionic Framework Ionic Vue
1

Check out my routes:

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: Tabs,
    children: [
      {
        path: "",
        redirect: "/surveys",
      },
      {
        path: "surveys",
        component: Surveys,
      },
      {
        path: "settings",
        component: Settings,
      },
      {
        name: "survey",
        path: "/surveys/:surveyid",
        component: SurveyRouterOutlet,
        props: true,
        children: [
          {
            path: "",
            component: Survey,
            props: true,
          },
          {
            path: "components/:componentid",
            component: Component,
            props: true,
          },
          {
            path: "components/new/:type",
            component: Component,
            props: true,
          },
          {
            name: "preview",
            path: "preview/:previewid",
            component: Preview,
            props: true,
          },
        ],
      },
    ],
  },
];

As you can see when I go from /surveys to /surveys/4 for example, there is no animation. If I go from /surveys/4/components/8 I get animation. I believe because I have to use SurveyRouterOutlet it doesn’t quite work the same as going directly to the component. How can this be fixed or how can I have those same routes in a different way?

2

You should only be using nested routes for tabs. Everything else should be shared URLs. See the documentation here for more info.

Also to note, support for child routes within tabs has been removed in Ionic v6 (reference).

It should be something like this:

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: Tabs,
    children: [
      {
        path: "",
        redirect: "/surveys",
      },
      {
        path: "surveys",
        component: Surveys,
      },
      {
        path: "settings",
        component: Settings,
      },
      {
        name: "survey",
        path: "surveys/:surveyid",
        component: Survey,
        props: true
      },
      {
        path: "surveys/:surveyid/components/:componentid",
        component: Component,
        props: true
      },
      {
        path: "surveys/:surveyid/components/new/:type",
        component: Component,
        props: true
      },
      {
        name: "preview",
        path: "surveys/:surveyid/preview/:previewid",
        component: Preview,
        props: true
      },
    ],
  },
];
3

Hmmm… I tried doing the routes like that and it was not resolving properly. Let me try it again, if it’s acting funky I’ll record a video and post here.

4

Well that worked! I swear that was my first choice and what ended up happening was other Components were picking up the route. Does order matter in this object? Either way, glad to see it’s resolved and I’m doing it right this time! Thanks!

5

Good to hear!

I don’t see specifics of how Vue does route matching in the documentation but typically you want the most specific first if there were possible matches as most router logic starts at the top and stops on the first match (from my experience at least in .NET and Laravel). In your case, it shouldn’t matter.

Also make note of this issue that may or may not be related. It is fixed in Ionic 6.