This.f7router.navigate is not a function"

I am getting the above error on a page routed by this.f7router.navigate.

I have also tried this.props.f7router.navigate(‘home’) same error.

See code attached.

Thanks

Would be helpful if you can create a minimal reproduction live example using template from here How to ask a good question on forum

Hi All,

I have two pages : home.vue and editProfilePicture.vue.

In home.vue I check if the user has uploaded his picture. If not he is routed to editProfilePicture.vue. where he upload the picture using the command:

this.$f7router.navigate("/editProfilePicture/", {});

The above command works perfectly.

In editProfilePicture.vue after he has successfully uploaded his photo, he is routed back to home.vue using this command:

this.$f7router.navigate("/home/", {});

But this command is throwing the error :
This.f7router.navigate is not a function”

See the script below

//home.vue
<template>    
</template>

<script>
    export default {
        
        data () {
            return {
                msg: 'Welcome to my chat App'
            }
        }
     
async created() {
 var photoUpload = await this.$store.dispatch("getUserPhotoStatus");
   
    if (!photoUpload) {
      this.$f7router.navigate("/editProfilePicture/", {});
      this.$store.commit(
        "setAlertMessage",
        "Please Upload Profile Picture before chatting with others"
      );
      return;
    }
    
    this.$store.dispatch("getMyFriendsAI");
    
  },
    }
</script>




//editProfilePicture.vue
<template>    
</template>

<script>
    export default {

    props: {
       f7router: {},
    },
        
        data () {
            return {
                profilePictureUrl:"", 
            }
        }
     
photoUpdated() {

     this.$store.commit(
        "setAlertMessage",
        "Photo Updated Successfully"
      );
   
      this.$f7router.navigate("/home/", {});
     
    }
</script>