Demand for 1After the index search, the details page is displayed


Keep-alive cache component

💬1. Write keepAlive: true in the meta of the route (optional step, just a mark, and not used in the end) 💬2. Keep -alive include the name of the page that needs to be cached in app. Vue


Requirement 2: No cache is retained when an index is entered from elsewhere

Keep-alive is no longer cached after using destory 👉 destory

I wrote a guard inside the component in index

After refreshing the index, search -> jump details page -> return index retains the search record -> return index page -> navigation page -> return index, search -> jump details page -> return index does not retain the search record

❓ only keeps the index for the first time after refreshing.

💬 after manually destroying the component index, another instance is created but keep-Alive no longer caches it and a new instance is recreated each time it is displayed. What I want is to manually destroy it and then recreate the index page with keep-alive cache

Include dynamic binding – Recommended!

Include binds to dynamic data and dynamically modifies the contents of the cache for the purpose of clarifying the cache component rather than destory it directly

❓ tramping: caches index when the app. Vue page controls the jump to the details page, using the beforeRouteLeave inside the component

💬 reason: Because I have this single page application in app.vue did not leave ah!

✅ Do: Listen for $route to determine where to go and then change the include value

❓ : I want to go to the details page back to index home page do not refresh + but from the nav page to index to clear the previous record

Then the name should be the routing name of the details and index page

Include writes directly to the target cached page and then specifies that the page is not cached

For example, after setting results from the result Settings page, you refresh the interface to get the latest list, but the cache will never refresh again, so you need to force some interface to be called when returning from the result page// Results page click save button:
  async handleSave () {
      try {
        await setResult(postDataObj)
        sessionStorage.setItem('isKeep'.'/missionCenter/detail/result')  
        // The nexttick is not stored locally
        this.$nextTick(() = > {
          this.$router.push({ name: 'missionCenter'})})}catch (error) {
        this.$toast.fail('Setting result failed, please try again later')}},// List page:
  activated () {
    const arr = ['/customer/detail'.'/missionCenter/detail/result']
    let form = sessionStorage.getItem('isKeep') | |' '
    This.getdatalist () = this.getdatalist ()
    if (arr.includes(form)) {
      this.currentId = this.$route.query.id || ' '
      this.getcompleteDetail()
      this.page.pageNum = 1
      this.getDataList()
      sessionStorage.removeItem('isKeep')}},Copy the code

conclusion

  1. The component outsource keep-alive allows caching to avoid route redirects

  2. Hook execution steps

    If only four of these hook functions are written to two pages, then the deactivated hook of the cached index page will be executed only after the order of execution is skipped

  1. Clearing the cache dynamically controls the value of the include

  2. You can control include values by listening for $route to determine where to go