Unable to route in HR PWA App, just URL is changing but the page content is remaining same

I want to go back or route to a specific URL when a button is clicked
I tried

1.route.back()
2.route.push('/new_route')
3.router.push({ name: "Home"})
4.<cancelIcon @click="backToHome" :router-link="{ name: 'Home' }"/>

still no use and I am using

import { useRouter } from 'vue-router'
const router = useRouter();

what is the issue and how can I solve it

Try this

1 Like

hey @ejaaz ,
I tired router-link but still same issue,
I solved it by adding <ion-page></ion-page/> just after <template>

<template>
    <ion-page>
      <ion-content>
        <div class="kiosk-mode fullscreen">
          <div
            v-if="toastMessage"
            :is-open="true"
            @didDismiss="toastMessage = ''"
            class="custom-toast"
            :class="{ 'success-toast': isSuccessMessage, 'error-toast': !isSuccessMessage }"
          >{{toastMessage}}
          </div>
          <div class="button-container">
              <ion-button expand="block" color="success">
                <div class="clock_in_out"  @click="captureAndRegister">Register</div>
                <cancelIcon @click="route.push('/home')"/>
              </ion-button>
            </div>
        </div>
      </ion-content>
    </ion-page>
  </template>

there was no <ion-page></ion-page/> before, after adding then routing is working fine