Problem setting up Vue Routing to Same Component

Ionic Framework Ionic Vue
1

I’ve got an app that has a handful of vue components – it’s a directory, so the the detail view is the same component for all users. You go to a component with a list of users, click into one, fire up the detail view, and from the detail view you can visit other users that might have relationships to those users.

I’m using a ion-menu and an ion-router-outlet as the main components in App.vue.

In my router index.ts I’ve got a handful of routes, but the one that I’m having problems with is the detail view.

Essentially from a detail view in the directory you can click a button to visit the detail view of a user that has a relationship to the user you’re on the detail view for. It’s supposed to navigate to another “instance” of the detail view, but i can’t seem to make that illusion work.

Right now I’m trying
this.$router.push({name: 'constituent-view', params: {id: {{nextUsersId}}}) I would think that ionic would know this means i want to force a navigation (leave the view and re-enter the same component).

All this does is keeps me on the same component view with the same data, but updates the url – eg the Ionic lifecycle events don’t get called, particularly the ones that deal with setting up the component in IonViewWillEnter() All of the docs seem to say its fine to use the $router.push so I’m not sure what I’m missing here…

I could manually call a setup function for the component after the navigation to update the data, but that doesn’t solve the problem of this history. When I click back, Vue Router (and I assume the ion-router) don’t know realize that the last component I visited was actually the same one.

Is there a way to navigate to the same component easily with the ionic routing system in Vue?

I kind of miss the real Vue lifecycle events. :frowning: Having a component re-create and re-mount are very useful ways of making sure I don’t have a bunch of stale properties floating around that I don’t need.

2

Ok, so just a quick update – I haven’t looked much behind the scenes into what Ionic is using to determine when a navigation should occur, but from the looks of it, it’s if the $route.name is different.

So a workaround if you’re trying to get navigation lifecycle to fire off, you can do something silly like this:

//router/index.ts
...
{
    path: '/constituent-details/:id',
    name: 'constituent-details',
    component: ConstituentDetails,
    meta: {
      pageTitle: "Details",
      requiresAuth: true
    },
  },
  {
    path: '/other-constituent-details/:id',
    name: 'other-constituent-details',
    component: ConstituentDetails,
    meta: {
      pageTitle: "Details",
      requiresAuth: true
    },
  },

//inside component
...
    async selectUser(user: Hash) {
      let nextRoute = 'constituent-details';
      if (this.$route.name === 'constituent-details') {
        nextRoute = 'other-constituent-details';
      }
      await this.$router.push({
        name: nextRoute,
        params: {
          id: user["UserId"]
        }
      })
    },
3

There is an open GitHub issue for this: https://github.com/ionic-team/ionic-framework/issues/22662.

1 Like