vueルート転送パラメータの方式のまとめ
日常業務では、ルートを移動しながらパラメータを伝達するのが一般的です。
1)ダイナミックルーティング方式による
1.動的ルーティングとquery属性転送値ページのリフレッシュパラメータは失われず、paramsは失われます。
2.動的ルーティングは、一般的に1つのパラメータを転送する際に使用されることが多い(詳細ページのIDなど)。Qery、paramsは、1つまたは複数のパラメータを伝達することができる。
補足方法:
ページ更新データは失われません。
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つの方法の内容を紹介します。以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。