vueルート転送パラメータの方式のまとめ


日常業務では、ルートを移動しながらパラメータを伝達するのが一般的です。
1)ダイナミックルーティング方式による

//              
{
   path: '/detail/:id',
   name: 'Detail',
   component: Detail
  }
//     
var id = 1;
this.$router.push('/detail/' + id)
 
//         
this.$route.params.id
2)query属性による値の伝達

//       
{
   path: '/detail',
   name: 'Detail',
   component: Detail
  }
//     
this.$router.push({
 path: '/detail',
 query: {
  name: '  ',
  id: 1,
 }
})
 
//           
this.$route.query 
3)params属性による値伝

//       
{
   path: '/detail',
   name: 'Detail',
   component: Detail
  }
//     
this.$router.push({
 name: 'Detail',
 params: {
  name: '  ',
  id: 1,
 }
})
 
//           
this.$route.params 
まとめ:
1.動的ルーティングとquery属性転送値ページのリフレッシュパラメータは失われず、paramsは失われます。
2.動的ルーティングは、一般的に1つのパラメータを転送する際に使用されることが多い(詳細ページのIDなど)。Qery、paramsは、1つまたは複数のパラメータを伝達することができる。
補足方法:
ページ更新データは失われません。

methods:{
 insurance(id) {
    //    $router.push          
    this.$router.push({
     path: `/particulars/${id}`,
    })
}
ルーティングの設定に対応する必要があります。

this.$route.params.id
ここで、vueルートの転送パラメータについてまとめた文章を紹介します。Vueルートのジャンプパラメータに関する3つの方法の内容を紹介します。以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。