vue achieves forward refresh, backward, no refresh effect

Recently, I'm trying to do mobile projects with vue. I hope to achieve the effect of forward refresh and backward without refreshing. That is, the loaded interface can be cached (re-reloaded without reloading when returned), and the closed interface can be destroyed (reloaded when entering again). For example, refresh a->b->c forward (b,c) and c->b->a backward (b,a) does not refresh.

because keep-alive All loaded interfaces will be cached, and the interface will be destroyed when it cannot be returned, resulting in the interface not being reloaded when entering again. So the first solution that comes to mind is to call it when clicking the return button on the interfacethis.$destroy(true) Come and destroy the interface. However, there will be a physical return key on the mobile android device. If it returns through the physical return key, it will not be handled. Although you can rewrite the return event of Android to call the js method, the global method of js is called, and it cannot be destroyed in detail on the top-level interface.

So we need to find another way. Fortunately, this article inspired mekeep-aliveThank you for sharing.

It would be great if I could know whether the route was forward or backward. In this way, I could set the keepAlive from route to false when I backward and the keepAlive to the route to truth. Then, when I moved forward again, the route that was set to false before reloading.

I won’t say much nonsense, there are three interfaces for simulation: login to server to main.

First, I set a strict hierarchical relationship for the paths of these three interfaces, and set keepAlive to be true, and all need to be cached by default.

const router = new Router({
 routes: [
  {
   path: '/',
   redirect: '/login'
  },
  {
   path: '/login',
   component: Login,
   meta: {
    keepAlive: true
   }
  },
  {
   path: '/login/server',
   component: ServerList,
   meta: {
    keepAlive: true
   }
  },
  {
   path: '/login/server/main',
   component: Main,
   meta: {
    keepAlive: true
   }
  }
 ]
})

Because the levels of these three interface paths are different, I can use the beforeEach hook to determine when to retreat. When backing, keepAlive from routed to false and to routed to keepAlive to nature.

((to, from, next) => {
 const toDepth = ('/').length
 const fromDepth = ('/').length
 if (toDepth < fromDepth) {
  ('Back.  .  .  ')
   = false
   = true
 }
 next()
})

Finally, the cached interface is usedkeep-alive When wrapped, you can achieve the effect of refreshing forward and refreshing when backing.

<keep-alive>
     <router-view v-if="$">
      <!-- Here is the view component that will be cached -->
     </router-view>
    </keep-alive>
    <router-view v-if="!$">
     <!-- Here is the view component that is not cached -->
    </router-view>

Summarize

The above is the effect of vue introduced to you by the editor to achieve forward refresh, backward and not refreshing. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!