当我单击面包屑时，它没有显示以前在此处显示的内容……这是为什么？

Question

我正在为应用搜索属性。

搜索属性后，将显示一个表，其中包含属性搜索结果，页面顶部的面包屑如下所示：Dasboard / Property Search。

在表上，您可以单击贷款编号并转到贷款详细信息页面，这将使面包屑看起来像这样： Dashboard / Property Search / Loan Detail。

现在，当我尝试通过单击“属性搜索”面包屑返回时，将不会显示任何内容。只是一个空的组件。

我希望在单击“贷款详细信息”页面，然后单击面包屑以返回到结果组件之后，仍然显示属性搜索结果组件，但是我不知道该怎么做。

我尝试使用该组件，但无法正常工作。我以为我需要单身人士之类的东西，但我无法使之工作。我也尝试过弄乱路由器，但也无法弄清楚。

属性搜索组件：

<template>
  <form @submit.prevent="submitSearch">
    <div class="search-bar-pad white">
      <b-input-group>
        <b-form-input v-model="searchCriteria" size="sm" type="text"></b-form-input>
        <b-input-group-append>
          <b-btn type="submit" size="sm" variant="danger">
            <i class="fa fa-search" aria-hidden="true"></i>
          </b-btn>
        </b-input-group-append>
      </b-input-group>
    </div>
  </form>
</template>




<script>
export default {
  name: "PropertySearch",
  data() {
    return {
      searchCriteria: ""
    };
  },
  methods: {
    submitSearch() {
      let search = {
        search: this.searchCriteria
      };
      this.$store.dispatch("toggleLoading", true);
      this.$store.dispatch("searchProperties", search);
      this.$router.push("/PropertySearch");
    }
  }
};
</script>

PropertySearchResults组件：

<template>
  <div class="animated fadeIn">
    <b-card class="min-height-8" template slot="header">
      <div slot="header">Property Search Results</div>
      <b-container fluid class="px-0 py-0">
        <div v-if="results.length > 0" class="recordBar animated fadeIn">
          <div class="counter float-right">
            <span class="val">{{ results.length || 0 }}</span> Record(s)
          </div>
        </div>
        <loading-spinner :show="loading"></loading-spinner>
        <div v-if="loading == false && results.length == 0">
          <b-alert show class="text-center">No Records Found</b-alert>
        </div>
        <b-table
          v-if="results.length > 0"
          table
          striped
          bordered
          hover
          class="animated fadeIn"
          :items="results"
          :fields="fields"
          :currentPage="currentPage"
          :per-page="perPage"
        >
          <template slot="loanNumber" slot-scope="data">
            <router-link
              :to="{ name: 'Loan', params: { loanId: String(data.item.loanId)}}"
            >{{data.item.loanNumber}}</router-link>
          </template>
        </b-table>
        <b-pagination
          v-if="results.length > 10"
          limit="10"
          class="mt-5"
          :total-rows="results.length"
          :per-page="perPage"
          v-model="currentPage"
        />
      </b-container>
    </b-card>
  </div>
</template>



<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      results: [],
      loading: true,
      currentPage: 1,
      perPage: 15,
      fields: [
        { key: "loanId", label: "Loan ID", sortable: "true" },
        { key: "workorderNumber", label: "WO Number", sortable: "true" },
        { key: "dateOrdered", label: "Date Ordered", sortable: "true" },
        { key: "loanNumber", label: "Loan Number", sortable: "true" },
        { key: "loanType", label: "Loan Type", sortable: "true" },
        { key: "address1", label: "Street", sortable: "true" },
        // { key: "address2", label: "Address 2", sortable: "true" },
        { key: "city", label: "City", sortable: "true" },
        { key: "state", label: "State", sortable: "true" },
        { key: "zip", label: "Zip", sortable: "true" },
        { key: "clientCode", label: "Client Code", sortable: "true" },
        { key: "clientName", label: "Client Name", sortable: "true" }
      ]
    };
  },
  created() {
    this.$store.watch(
      state => {
        return this.$store.state.currentlyLoading;
      },
      (newVal, oldVal) => {
        this.loading = newVal;
      }
    );

    this.$store.watch(
      state => {
        return this.$store.state.searchResults;
      },
      (newVal, oldVal) => {
        this.results = newVal;
      }
    );
  }
};
</script>

路由器部分：

 routes: [{
      path: '/',
      redirect: '/dashboard',
      name: 'Dashboard',
      component: DefaultContainer,
      children: [{
          path: '/dashboard',
          name: '', 
          component: Dashboard,
          meta: {
            requiresAuth: true
          }
        },
        {
          path: "/PropertySearch",
          name: "Property Search",
          component: Container,
          children: [{
              path: '/',
              name: '',
              component: PropertySearchResults
            },
            {
              path: '/LoanDetail/:loanId',
              name: 'Loan',
              component: LoanDetail
            }
          ]
        }

商店：

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex, axios)


export const store = new Vuex.Store({
  state: {
    searchResults: [],
    currentlyLoading: false
  },
  mutations: {
    UPDATE_SEARCH_RESULTS(state, payload) {
      state.searchResults = payload;
    },
    TOGGLE_LOADING(state, payload) {
      state.currentlyLoading = payload;
    }
  },
  actions: {
    searchProperties({
      commit
    }, searchValue) {
      axios
        .post("/search/property", searchValue)
        .then(function (res) {
          commit('UPDATE_SEARCH_RESULTS', res.data);
          commit('TOGGLE_LOADING', false)
        })
        .catch(function (err) {
          commit('TOGGLE_LOADING', false)
          console.log(err);
        })
    },
    toggleLoading({
      commit
    }, bool) {
      commit('TOGGLE_LOADING', bool);
    }
  }
})