vue でルーティングを使用してページ更新を実装する

この記事では主に、Vue がルーティングを通じてページ更新を実装する方法を紹介し、参考として提供します。

vue は WeChat モール プロジェクトを開発します。

要件は次のとおりです。

ショッピング カート ページには、複数のコンポーネントが含まれています。注文の場合、ショッピング カート ページが存在しません。更新すると、バスを介したショッピング カート コンポーネント間のイベント送信により、ページ ジャンプ (非物理的な戻り) が beforeDestroy メソッドをトリガーできないため、このメソッドでバス メソッドを破棄できません

 beforeDestroy() {
  this.$root.Bus.$off('judge')
  this.$root.Bus.$off('refreshDetail')
  this.$root.Bus.$off('clearAll')
  this.$root.Bus.$off('upDataCart')
 },

無力です、beforeRouteLeave を通して破棄してください

 beforeRouteLeave(to, from, next) {
  this.$root.Bus.$off('judge')
  this.$root.Bus.$off('refreshDetail')
  this.$root.Bus.$off('clearAll')
  this.$root.Bus.$off('upDataCart')

  next()
 },

同じように、物理演算が戻ったときにショッピング カートの create メソッドをトリガーすることはできません。また、バスの $on メソッドもトリガーできません

最終的には、物理​​演算が返されたときにページを更新します。この問題はreturnsで対処できます

アイデア1

  beforeRouteEnter(to, from, next) {
   next(()=>{
     window.location.reload()
   })
  },

この方法は理論的には実現可能ですが、ページが際限なくスクロールされてしまいます

最後に、非常に低コストと思われる2番目のアイデアを採用しました。しかし、それは実際の問題を解決します

 this.$router.replace({ name: 'cart' })// 处理返回刷新问题
   this.$router.push({
    path: '/order/order_sure',
    query: {
     sku: sku_str,
     cart: 'cart'
    }
   })

ページがジャンプする前に、ルーティングを通じて現在のページに置き換えてから、注文ページにジャンプすると、戻り値が自動的に更新されます。これより良い方法がある場合、この方法は理想的ではありません。 、共有することを歓迎します

この問題に対処する特別な方法があります。ショッピングカートページで、次のコードを追加するだけです

 // 销毁组件，返回刷新
 deactivated() {
  this.$destroy()
 },

上記は私がまとめたものです。未来。

関連記事:

PHP クロージャーと匿名関数 (詳細なチュートリアル)

Vue コンポーネントのカスタム イベントについて (詳細なチュートリアル)

WeChat ミニ プログラムで 3 レベルのリンケージ セレクターを使用する方法

以上がvue でルーティングを使用してページ更新を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。