Vue は前方リフレッシュ効果を実装します

今回は、vue で前方リフレッシュ効果を実装する方法について説明します。vue で前方リフレッシュ効果を実現するための注意事項は何ですか。以下は実際のケースです。

デバイスに物理的な返品キーが存在します。キー、処理できません。 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(&#39;后退。。。&#39;)
  from.meta.keepAlive = false
  to.meta.keepAlive = true
 }
 next()
})

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

ルーティング が順方向か逆方向かを知ることができれば素晴らしいと思います。 backward from ルートの keepAlive を false に設定し、to ルートの keepAlive を true に設定すると、再度前進するときに、以前 keepAlive を false に設定したルートをリロードできます。

これ以上ナンセンスではありません。ここでは、サーバーへのログインとメインへの 3 つのインターフェイスがシミュレートされています。

まず、これら 3 つのインターフェイス ルートのパスに厳密な階層関係を設定し、デフォルトでキャッシュを必要とする keepAlive を true に設定します。

<keep-alive>
     <router-view v-if="$route.meta.keepAlive">
      <!-- 这里是会被缓存的视图组件 -->
     </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive">
     <!-- 这里是不被缓存的视图组件 -->
    </router-view>

これら 3 つのインターフェイスのパスは異なるレベルにあるため、beforeEach フックを使用していつ戻るかを決定できます。戻る場合は、from ルートの keepAlive を false に設定し、to ルートの keepAlive を true に設定します。 rrreee 最後に、キャッシュする必要があるインターフェイスを keep-alive でラップして、前に進むときに更新され、戻るときに更新されない効果を実現します。
rrreee

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:
jQueryコードの最適化方法のまとめ

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