How can i maintain the state of a report while navigating to a different component instance?

Question

I have a Vue 3.1.31 and vue-router 4.0.14 Application.

I have a report with multiple objects, each one being able to navigate to a new route where the user can view/print a PDF of its information, my problem is that navigating to one of these destroys the state of the report and the user has to input search parameters again and reload the report.

If I open the route in a new tab with

// let route = router.resolve({ path: '/quotations/inspection_list_PDF'});
// window.open(route.href);

Then the pdf is blank (its stateless) And if i router.push and router.go(-1) then the state of my report is destroyed.

I have looked at vue's Keep-alive wrapper however i am not using a tabbed interface, i use routes and here expecially my PDF preview has its own vue file with two components imported and used there.

So InspectionListPDF.vue contains:

import InspectionListTemplate from './InspectionListTemplate.vue'
import PageControls from './InspectionList_PageControls.vue'

Which is bring in like this:

<InspectionListTemplate/>

    <div class="executions-bar">
        <div class="buttons-left">
            <button :disabled="loading" @click="createPDF()" >Save PDF</button>
            <button @click="goBack()"><font-awesome-icon :icon="['fa', 'backward']" size="lg" /> Back</button>
        </div>
    </div>
    <PageControls/>

If i open the route in a new tab with

// let route = router.resolve({ path: '/quotations/inspection_list_PDF'});
// window.open(route.href);

Then the pdf is blank (it is stateless) And if I router.push and router.go(-1) then the state of my report is destroyed.

I have looked at vue's Keep-alive wrapper however I am not using a tabbed interface, I use routes and here especially my PDF preview has its own vue file with two components imported and used there.

So InspectionListPDF.vue contains:

import InspectionListTemplate from './InspectionListTemplate.vue'
import PageControls from './InspectionList_PageControls.vue'

Which i bring in like this:

Save PDF Back

The behavior I am after is either for the user to be able to navigate back without the report's state having been destroyed, or for the PDF preview to open in another tab with its correct state.

Answer 1

I found a solution after a helpfull hint from my manager.

The state itself is still there in the vuex js store, so i added a created hook to the report vue file checking for the state and then passed all data back to the report in a function.

created() {
    if(this.foundQuotations && this.foundQuotations.length >= 1){
        console.log(this.foundQuotations);
        this.foundQuotationsFunc(this.foundQuotations);
    }    
},

This worked because my report functions using a watcher on the foundQuotations state, however nothing in this state has changed when I route back to the report so the basic report layout is rendered but the watcher is not fired.