Router.push changes url but doesn't rendering page

This sample code changes url path, but app doesn’t render pages.
What can I do?

<template>
  <ion-page>
    <ion-content>      
      <ion-grid>
        <ion-row>
          <ion-col size="12">
            <ion-button @click="end()" expand="block">
              <ion-label class="ion-text-wrap"End</ion-label>
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'Page2',
  components: {
  },
  setup() {
    const router = useRouter();
    const end = () => {
      // something to do.
      return router.push({ name: 'Home'});
    };
    return {
      end,
    }
  },
});
</script>

What does your route file look like? router/index.ts or router/index.js.

1 Like

My route file is router/index.ts!

Can you share the contents? :slight_smile:

This is the contents!

import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';

import Home from '@/views/Home.vue';
import Page2 from '@/views/Page2.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/page2',
    name: 'Page2',
    component: Page2
  },
]

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

export default router

Hmmmm…nothing is jumping out to me. Assuming there are no errors/warnings in the console? Have you tried console.log within your end function to make sure it is getting called?

Can you also try a router-link directly on the ion-button? Something like:

<ion-button :router-link="{ name: 'Home' }" expand="block">
    <ion-label class="ion-text-wrap"End</ion-label>
</ion-button>

There is no error in console.
I guess router-link is not in ionic version 5.
When I used href for change route, that was working.

<ion-button href="/home" expand="block">
    <ion-label class="ion-text-wrap">End</ion-label>
</ion-button>

But I need to execute some code before routing, so I want to use router.push method.

router-link is not documented in Ionic 5 but I am using it with success. My guess is that it works because Ionic is still using Vue Router under the hood. If it isn’t working for you, then it confirms there is something definitely wonky with the router.

The only other thing is that I don’t see you importing/including ion-page or ion-content or any of the Ionic components for that matter. Are you importing them globally? If not, Vue usually complains.

1 Like

Oh, Thank you so much.
I did not use import and that was the cause!

1 Like

Glad the issue is resolved! Wanted to note that router-link is documented, but its visibility could be improved: Vue Navigation - Ionic Documentation

The Framework v6 docs will have improved documentation regarding this: Vue Navigation | Ionic Documentation

3 Likes
1 Like