Vueでリフレッシュせずに前方リフレッシュと後方リフレッシュの効果を実現する方法

この記事では主に、Vue の前方リフレッシュ効果と後方非リフレッシュ効果、つまり、ロードされたインターフェイスをキャッシュする (再ロードせずに戻る) ことができ、閉じられたインターフェイスを破棄する (再入力時に再ロードされる) ことを紹介します。この記事では実装のアイデアを共有しますので、必要な方は参考にしてください

最近、vue を使用してモバイル プロジェクトを実行しようとしています。順方向リフレッシュと逆方向非リフレッシュの効果を実現したいと考えています。つまり、ロードされたインターフェイスはキャッシュでき (戻るときにリロードする必要はありません)、閉じられたインターフェイスは破棄できます (再入力時にリロードされます)。たとえば、a->b->c は前方 (b, c) に移動してリフレッシュされ、c->b->a はリフレッシュせずに後方 (b, a) に移動します。

keep-aliveはロードされたすべてのインターフェイスをキャッシュするため、戻るときにインターフェイスを破棄できず、その結果、再入力時にインターフェイスがリロードされません。したがって、最初に思いつく解決策は、インターフェイス上の戻るボタンをクリックしたときに、this.$destroy(true)を呼び出してインターフェイスを破棄することです。ただし、モバイル Android デバイスには物理的なリターン キーがあり、物理的なリターン キーを使用して戻った場合、それを処理する方法はありません。 Android の return イベントを js メソッドを呼び出すように書き換えることはできますが、js のグローバル メソッドが呼び出されるため、最上位のインターフェイスを具体的に破棄することはできません。keep-alive会把所有加载的过的界面都缓存起来，没法实现返回时将界面销毁掉，导致再进入时没有重新加载这个界面。于是首先想到的方案是在点击界面上返回按钮的时候，调用this.$destroy(true)来将界面销毁掉。但是在移动端 android设备上会有物理返回键，如果通过物理返回键返回的话，就没法处理了。虽然可以重写android的返回事件，来调用js的方法，但是调用的是js的全局方法，没法具体让在最上层的那个界面销毁掉。

于是就需要另辟蹊径了。还好这篇文章给了我启发 vue-router 之 keep-alive ，多谢作者的分享。

要是能够知道路由是前进还是后退就好了，这样的话我就能在后退的时候让 from 路由的 keepAlive 置为 false ， to 路由的 keepAlive 置为 ture ，就能在再次前进时，重新加载之前这个 keepAlive 被置为 false 的路由了。

废话不多说了，这里模拟有三个界面 login 到 server 到 main 。

首先我给这三个界面路由的 path 设置了严格的层级关系 ，并设置keepAlive都是true，默认都是需要缓存。

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 } } ] })

由于这三个界面path的层级不同，我就能通过 beforeEach 这个钩子判断出什么时候是后退了。在后退时将 from 路由的 keepAlive 置为 false ， to 路由的 keepAlive 置为 ture 。

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

最后需要缓存的界面用keep-alive

rrreee

rrreee

以上がVueでリフレッシュせずに前方リフレッシュと後方リフレッシュの効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。