Vue implements forward and backward refresh without refreshing effect, and vue performs backward refresh

Vue implements forward and backward refresh without refreshing effect, and vue performs backward refresh

Recently, vue is used to create a mobile project. We hope to achieve the effect of refreshing forward and backward without refreshing. That is, the loaded interface can be cached (the returned interface does not need to be reloaded), and the closed interface can be destroyed (re-loaded upon re-entry ). For example, refresh a-> B-> c (B, c), and c-> B-> a (B,.

Because keep-alive All loaded interfaces will be cached, and the interface will be destroyed when the returned results cannot be implemented. As a result, the interface will not be re-loaded when the interface is re-imported. So the first thought of the solution is to callthis.$destroy(true) To destroy the interface. However, there is a physical return key on the android device on the mobile end. If the physical return key is used to return the result, it cannot be processed. Although the android return event can be rewritten to call the js method, the global method of js is called, and the interface at the top cannot be destroyed.

So we need to find another path. Fortunately, this article inspired me to share the keep-alive of vue-router. Thank you for sharing this article.

It would be nice to know whether the route is forward or backward, so that I can set the keepAlive OF THE from route to false and the keepAlive OF THE to route to true when the route is backward, the keepAlive route is set to false when it is re-loaded.

I will not talk much about it. Here we simulate three interfaces: login to server to main.

First, I set a strict hierarchical relationship for the path of the three interface routes, and set keepAlive to true. By default, cache is required.

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 of the different levels of the three interfaces, I can use the beforeEach hook to determine when the interface is backward. Set the keepAlive of the from route to false and the keepAlive of the to route to true when the router is switched back.

Router. beforeEach (to, from, next) => {const toDepth =. path. split ('/'). length const fromDepth = from. path. split ('/'). length if (toDepth <fromDepth) {console. log ('back... ') From. meta. keepAlive = false to. meta. keepAlive = true} next ()})

The last interface to be cachedkeep-alive You can refresh the current status and do not refresh the status when you roll back.

<Keep-alive> <router-view v-if = "$ route. meta. keepAlive"> <! -- Here is the cached view component --> </router-view> </keep-alive> <router-view v-if = "! $ Route. meta. keepAlive "> <! -- Here is a view component that is not cached --> </router-view>

Summary

The above is a small series of vue to introduce you to achieve forward and backward refresh without refreshing the effect, I hope to help you, if you have any questions, please leave a message, the small series will reply to you in a timely manner. Thank you very much for your support for the help House website!