How to correctly use routing with Vue in Ionic

Ionic Framework Ionic Vue
1

I have a main tabs view started from the Tabs Starter template.
Inside one of those tab views I have an ion-items list.
When clicking on an item, I want to go to a tab child route passing an ID (eg. /tab/page/:id).

That all works, BUT, I don’t have automatic page transitions and my ion-back-button does not work, so I guess something is going wrong in the routing.

The docs are still Angular heavy so I’m not sure if I’m using the Vue routing correctly with Ionic.
The default Vue router options such as :to are missing and an ion-item only has href (which I cannot use as this reloads te browser) and the button attribute.

I also see a lot of router-link usage, but in Ionic 5 that does not seem to be a part of ion-item anymore.

After going through the forums, I found a solution by using @click="router.push('/tab/page/${id}'): on my ion-item.
That correctly goes to the detail page, but as mentioned above, I don’t seem to be getting all the benefits from the router stack in Ionic.

Could somebody please give a basic example of the tabs starter template with a child route and a back button?

1 Like
2

This Ionic/Vue getting started video is worth watching. It covers all the basics including the router, tabs, etc.

Hope it helps.

1 Like
3

Tnx Treigh, but unfortunately it doesn’t answer my question.
I talks only very briefly about a button with the router-link attribute, which indeed works, but it doesn’t address or solve my problem with how to connect ion-items in the whole router thing.

4

Can you provide your app in a GitHub repo?

5

Is it ok if I add you as a collaborator? I’d rather not share it publicly.

6

Yep, that’s fine. My GitHub username is liamdebeasi. Alternatively, you could also reproduce the issue in an Ionic starter app and send a link, that way your private code can stay private. Whichever you prefer.

7

Hi,

I’ve set up a sample project, you can see it here:

And the gitrepo is here:

As you’ll notice, you can go to the detail page by clicking on a list item on Tab 1, but there are no animations, the back button isn’t working, and when switching tabs, tab 1 remains broken. It looks as if the history stack is broken.

8

Did you find some spare time yet to take a look at my repo Liam? I’d really appreciate it. Many thanks in advance!

9

i found two issues in your project and resolved them both

  1. you did not include you components correctly in Detail.vue
  2. I changed the way you structured your router.

IMHO, when you start with ionic, start with a template… it will provide insight for a lot of the basic stuff.

also, I have over 25 video and some source on using Ionic with VueJS available here on my youtube channel - https://www.youtube.com/channel/UCMCcqbJpyL3LAv3PJeYz2bg

<template>
  <ion-page>
    <ion-header>
      <ion-header translucent>
        <ion-toolbar>
          <ion-title>Detail page</ion-title>

          <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
    </ion-header>

    <ion-content>
      {{ route.params.id }}
    </ion-content>
  </ion-page>
</template>

<script>
import {
  IonPage,
  IonHeader,
  IonTitle,
  IonButtons,
  IonBackButton,
} from "@ionic/vue";
import {
  trashOutline,
  createOutline,
  ellipsisHorizontalCircleOutline,
} from "ionicons/icons";
import { useRoute, useRouter } from "vue-router";
import { defineComponent } from "vue";

export default defineComponent({
  name: "DetailBeer",
  components: {
    IonPage,
    IonHeader,
    IonTitle,
    IonButtons,
    IonBackButton,
  },

  setup() {
    const router = useRouter();
    const route = useRoute();

    return {
      // Icons
      trashOutline,
      createOutline,
      ellipsisHorizontalCircleOutline,

      router,
      route,
    };
  },
});
</script>

<style scoped>
</style>


import { createRouter, createWebHistory } from "@ionic/vue-router";
import Tabs from "../views/Tabs.vue";

const routes = [
  {
    path: "/",
    redirect: "/tabs/tab1",
  },
  {
    path: "/tabs/",
    component: Tabs,
    children: [
      {
        path: "",
        redirect: "/tabs/tab1",
      },
      {
        path: "tab1",
        component: () => import("@/views/Tab1.vue"),
      },
      {
        path: "tab1/:id",
        component: () => import("@/views/Detail.vue"),
      },
      {
        path: "tab2",
        component: () => import("@/views/Tab2.vue"),
      },
      {
        path: "tab3",
        component: () => import("@/views/Tab3.vue"),
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;
10

Related?

11

it might be related, but his project was just wrong…

1 Like
12

Can you be more specific about why the projects wrong? @aaronksaunders

update: I see what you’re saying. Missed some posts in the thread.

13

Thanks @aaronksaunders !
Why my components was an array instead of an object in this file is a mystery, but that was obviously wrong.
And The routes are clear now too. I started from the tabs example and read this page: Vue Navigation - Ionic Documentation but not good enough obviously.

14

In addition to all of this, if you want to use named routes for robustness, you can bind a push method to a click event on your ion-item, like:

<ion-item @click="gotoUserDetailsPage(user.id)">
 </ion-item>

then in your methods:

methods: {
    gotoUserDetailsPage(id) {
      this.$router.push({
        name: 'user-details',
        params: { id }
      });
    }}

I have not found a way to do this inline like vue-router does though

<router-link :to="{ name: 'user-details', params: { id: 123 }}">User</router-link>

@ldebeasi @aaronksaunders any ideas?

15

Do you have the resolution of the problem?, I also encountered some issues on tab nested route

16

Just don’t nest routes :slight_smile: It worked for me.

17

Yeah, Deep nesting won’t work. I think we should have out of the box template for Sidemenu and tab

18

I think there is. You can start of Ionic with a basic tabs template. It just wasn’t explained properly that deep nesting won’t work.

19

Here’s mine

20

Hi Aaron, Your channel looks interesting, do you have a video that shows what that Tabs.vue view has to look like to make this code work? Thank you