【Vue】Vueページジャンプとルーティング間パラメータ伝達受信(動的ルーティングとネストされたルーティングを含む)

一、Vueページジャンプ:
1、アドレスバーのアドレスまたはaラベルを直接修正すれば行外部がジャンプする.
2,Htmlジャンプ:
aラベル、to hrefマッチングルーティングコンポーネントの出口
3,JSジャンプ:
          this.$router.Push('ルーティングアドレス')this.$router.replace{path:‘/’ }            this.$router.go(-sum)/数歩後退
注意:ルートをvueインスタンスにマウントすると、vueインスタンス化オブジェクトに2つのオブジェクトがマウントされます.
          this.$router(VueRouter)
          this.$ルート情報を構成するオブジェクト
 
二、ルートパラメータの伝達と受信:
1,ルーティングパラメータの構成:[#/describe/22]
親コンポーネントがパラメータを持ってルーティングを実行するには、次の手順に従います.

          getDescribe(id) {
              this.$router.push({
                  path: `/describe/${id}`,
              })
          }

ルーティングの構成:

     {
        path: '/describe/:id',
        name: 'Describe',
        component: Describe
     }

サブコンポーネント受信パラメータ:this.$route.params.id
2,パラメータをparamsで渡す[#/describeパラメータが非表示になる]
親コンポーネント:ルーティング属性のnameによって一致するルーティングを決定し、paramsによってパラメータを渡す

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

       //         
       //    ：  :/id       ，       url    ，          

サブコンポーネント受信パラメータ:this.$route.params.id
3,queryでパラメータを渡す[#/describe?id=22]
親コンポーネント:pathを使用してルーティングをマッチングし、queryを介してパラメータを渡します.この場合queryが渡すパラメータはurlの後ろに表示されますか?id=?

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

サブコンポーネント受信パラメータ:this.$route.query.id
4、動的ルーティング、異なるルーティングの伝達値
1)動的ルーティングの構成:

            routes:[
               //      ，        
               { path:’/user/:id’, component:User }
            ]

2)対応するページで動的ルーティングの値を取得する:this.$route.params
3)動的なジャンプ:
4)get転送値:
               
取得:this.$route.query
5,ルートネスト
SPAのページがある場合、異なるアドレスに基づいて他のコンポーネントがネストされ、ルーティングネストと呼ばれ、VueRouterはルーティングネストをサポートします.
①他のコンポーネントをネストする準備ができているコンポーネントで、コンテナを指定
たとえば、orderコンポーネントにネストStep 1Step 2Step 3を用意し、orderコンポーネントのテンプレートにrouter-viewを指定します.
②他のコンポーネントをネストするルートアドレスを設定する
orderコンポーネントがネストされる準備をするには、orderコンポーネントのルーティングアドレスにchildrenのプロパティを追加する必要があります.

            {
                path:'/order',
                component:OrderConfirmComponent,
                children:[
                    {path:'',component:**},
                    {path:'step1',component:**}
                ]
            }