vueでは、ルートパラメータの転送が発生する可能性があるピット


前言
vueの中でルートの跳躍のパラメーターは多種があって、自分で常用するのは下の何種類です。
  • は、router-linkを通じて
  • へジャンプします。
  • プログラムナビゲーションによるルーティング・ジャンプ
  • この記事では主に、vueルートのパラメータ伝達に遭遇したいくつかのピットについて紹介します。みなさんが参考にして勉強するために、以下の話は多くなくなりました。詳しく紹介してみましょう。
    まず私のルートの定義
    
    {
     path: '/b',
     name: 'B',
     component: resolve => require(['../pages/B.vue'], resolve)
    }
    AコンポーネントからBコンポーネントにジャンプして、ルート情報オブジェクトを通していくつかのパラメータを伝達します。
    
    this.$router.push({
     path: '/b',
     params: {
      paramA: 'a' 
     },
     query:{
      paramB: 'b'
     }
    })
    Bコンポーネントでパラメータを取得します。
    
    this.$route.query.paramB  //b
    this.$route.params.paramA //undefined
    ルートのparamsオブジェクトを通して渡されるパラメータparamBは常にundefinedであり、原因が見つからない。資料を調べて、やっと原因が分かりました。ルートのparamsオブジェクトが使用されるため、ルート名来を通じてルートを呼び出さなければならないが、pathを通じて呼び出すのとは違って、queryオブジェクトはこの要求がないからです。
    だからコードを修正します。
    
    this.$router.push({
     name: 'B',
     params: {
      paramA: 'a' 
     },
     query:{
      paramB: 'b'
     }
    })
    パスパラメータを対応するルーティング名に変更すればいいです。この時にパラメータを取得するのは正常です。
    
    this.$route.query.paramB  //b
    this.$route.params.paramA //a
    締め括りをつける
    以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。