[Vuejs]-How to pass data consistently from page to page in Vue Js?

This can be done in multiple ways.

1. Using a global store, You can use a library like Vuex to share the state between the components.
2. Using the Local Storage, if you want to preserve the data and keep saved after hard refreshing the page.
3. Using Session Storage, if you want to preserve the data and keep saved during the user session, but whenever the user close the browser tab it will be gone.

When you observe that the data is not present after a few refreshes, does it dissapear from the URL in your browser, or does it just not load?

If you want the data to stay more consistently, consider using localStorage

localStorage.setItem('item_text', 'username') //Save variable in browser data
let item_text = window.localStorage.getItem('item_text') //Get variable from browser data

EDIT:

If the URL is still present in the browser window, that sounds like a weird loading bug, where your code runs before the route is parsed by Vue.
You can try using a watcher instead of the "mounted" function:

watch: {
    $route: {
        immediate: true,
        handler() {
            this.testRoute()
        }
    }
}

I solved this error by setting a timeout function in my edit.vue.

handleCreate(event){
        event.preventDefault();
        this.$router.push({path: '/medical/admin/clinicvisit/add', query:{id:this.$route.params.id}},2000)
        // now 'this' is referencing the Vue object and not the 'setTimeout' scope
        this.loadClinicVisitData = true;
        setTimeout(() => this.loadClinicVisitData = false,1000)
    }