单击链接后如何在输入中保存价值？

Question

I have a search that works with ajax. If the user clicks on one of the seach results, he gets on a new page. Now, if he klicks back on the browser UI, he gets back to the search. However, the value from the input is not getting saved and the search is empty. I would like to have keep the value.

The search is programmed in vue.js:

<template>
    <div>
        <div class="row">
            <div class="col-12">
                <div class="card no-shadow-card mb-2">
                    <div class="card-header primary-color white-text">
                        <div class="d-flex justify-content-between">
                            <span>Filter</span>
                            <div>
                                <a href="javascript:void(0)" class="card-toggle-body-visibility white-text"><i
                                        class="fa fa-chevron-up rotated-icon" aria-hidden="true"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="form-row mb-4">
                            <div class="col-md-6 mb-1">
                                <!-- First name -->
                                <input type="text" id="vacancieName" data-reset="filter"
                                       class="form-control" placeholder="Name der Stellenanzeige" v-model="name">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-6">
                                <select class="md-form mdb-select"
                                        name=""
                                        searchable="Suchen"
                                        v-model="company">
                                    <option value="">Unternehmen</option>
                                    <option v-for="ownCompany in ownCompanies" :value="ownCompany.id" v-text="ownCompany.title"></option>
                                </select>
                                <button type="button" class="btn-save btn btn-primary btn-sm">Ok</button>
                            </div>
                            <div class="col-md-6">
                                <select class="md-form mdb-select"
                                        name=""
                                        searchable="Suchen"
                                        v-model="job">
                                    <option value="" disabled>Beruf Auswählen</option>
                                    <option v-for="avalibleJob in avalibleJobs" :value="avalibleJob.id" v-text="avalibleJob.name"></option>
                                </select>
                                <button type="button" class="btn-save btn btn-primary btn-sm">Ok</button>
                            </div>
                        </div>
                        <div class="col-12 float-right">
                            <button @click.prevent="getVacancies" type="button" class="btn btn-sm btn-light-blue">
                                Suchen
                            </button>
                            <button @click="resetFilter" type="button" class="btn btn-sm btn-unique">
                                Zurücksetzen
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <vacancie-index-result-componment v-for="vacancie in vacancies" v-bind:vacancie="vacancie"
                                              :key="vacancie.id"></vacancie-index-result-componment>
        </div>
    </div>
</template>

<script>
    import VacancieIndexResultComponentComapany from './VacancieIndexResultComponentCompany.vue'

    export default {
        name: 'VacancieIndexComponentCompany',
        components: {
            'vacancie-index-result-componment': VacancieIndexResultComponentComapany,
        },
        data() {
            return {
                avalibleJobs: [],
                ownCompanies: [],
                vacancies: [],
                name: '',
                company: '',
                job: ''
            }
        },
        methods: {}//Some Axios methods to get the results
    }
</script>

Answer 1

There are two ways to resolve your problems

1. Use dialog to handle your new page,above the <body></body> or your root element ,it coast less code to resolve. it's will hold the code in a single component
2. Hard way or the best way whatever you say, is to use the vue-route system, use <keep-alive></keep-alive> tags to cache your components, and you'll see the value is still there.you can also see it in dev-tools anyway.