VUEのピット登りの旅--ルートパラメータのいくつかの方法と注意点

VUEプロジェクトでは、ページ間のジャンプはルーティングを使用する必要がありますが、ルーティングはジャンプ時に様々なパラメータを伝達する必要があるのも一般的なニーズですが、VUEではルーティングにはいくつかの方法がありますか?
方式1:$routerを直接呼び出す.push携帯パラメータのジャンプを実現

    showDetail(id) {
        this.$router.push({
          path: `/detail/${id}`,
        })

対応するルーティング構成は次のとおりです.

   {
     path: '/detail/:id',
     name: 'Detail',
     component: Detail
   }

明らかにpathに/:idを追加して$routerに対応する必要がある.pushにpathが携帯するパラメータ.サブアセンブリでは、伝達されたパラメータ値を取得するには、次の方法を使用します.

this.$route.params.id

特に、取得パラメータはr o u t eではなくrouteであり、routerではない
この方法で最後に得られたリンクはこのようになっています.
http://www.xxxx.com/detail/10000
このような方法でページidなどのパラメータを渡すことをお勧めします.ページロードはこのパラメータに依存する必要があるため、このパラメータがなければページ全体がロードされず、通常使用されている場合は問題ありませんが、場合によっては、この詳細リンクが共有された後、このような方法でパラメータを渡す必要はありません.共有されたリンクが他の人に開かれた後、ロードできないか、トップページにジャンプされるなど、このような結果は明らかに私たちが必要としない.
方式2:ルーティング属性のnameによって一致するルーティングを決定し、paramsによってパラメータを伝達する.

    this.$router.push({
          name: 'Detail',
          params: {
            id: id
          }
        })

対応するルーティング構成:親コンポーネントでparamsがパラメータを運ぶために使用されているため、ここでは:/idを使用してパラメータを渡すことはできません.

{
     path: '/detail',
     name: 'Detail',
     component: Detail
   }

サブコンポーネント:パラメータを取得するには、r o u t eではなくrouteを使用することにも注意してください.routerではありません.

this.$route.params.id

方法3:pathを使用してルーティングをマッチングし、queryを介してパラメータを渡す
この場合queryが渡すパラメータはurlの後ろに表示されますか?id=?

    this.$router.push({
          path: '/detail',
          query: {
            id: id
          }
        })

対応するルーティング構成:

{
     path: '/detail',
     name: 'Detail',
     component: Detail
   }

対応サブコンポーネント:パラメータを取得するには

this.$route.query.id

以上、VUEにおいてルーティング・パラメータを使用するいくつかの方法と2つの注意点である.