1. クエリパラメータ:
クエリパラメータの受け渡し、get によるパラメータの受け渡しは、元のパラメータの受け渡しであり、その後にパス path が続きますか? id=18&name="Zhang San"、クエリに渡されます
例: { path:'/home'?name='Zhang San'&age=18、 component:()=>import('./home.vue') }
$route.query を通じてオブジェクトを取得し、属性名を指定してパラメータを取得します。
2. 動的ルーティングパラメータの受け渡し (params パラメータの受け渡し):
パスの後に複数の /: ID を続けることができ、パスに書き込まれたパラメータが動的ルーティング パラメータに渡されます。
例：{ パス:'./home/:id/:age', コンポーネント:()=>import('./home') }
テンプレートで $route.params を使用するとパラメータ オブジェクトが取得され、属性名は渡されたパラメータを取得します。
3.meta传参：
ルーティング設定ファイルのパススルーメタ: {name:'Zhang San', id: 17}
例： {
パス:'./home'、
コンポーネント:()=>import('./home')
メタ:{名前:'張三',id:16}
}
テンプレートで $route.meta を使用するとパラメータ オブジェクトが取得され、属性名は渡されたパラメータを取得します。
4. props パラメータの受け渡し (ブール モード、オブジェクト モード、関数モードの 3 つのモードに分かれています):
(1) ブールモード:
ブール モードでパラメーターを渡します。ルーティング構成ファイルのパス構成で、動的ルーティングを使用する場合、パラメーター オブジェクトを params に渡すだけでなく、props にも渡すことができます。パラメーターへのアクセスは Access it にある必要があることに注意してください。ジャンプ先のパスのコンポーネントから props を使用して動的ルーティングを通じてパラメーターを渡したい場合は、props を true に設定する必要があります
例: { path:'/home/:id/:name'、 component:()=>import('./Home')、 props:true //ブールモード },
props: ['id', 'name']、コンポーネント テンプレートで受信
(2) オブジェクトモード:
設定パスのオブジェクト内で props オブジェクトを宣言すると、その内部パラメータを対応するテンプレートで受け取ることができます
例: { path:'/list', Component:()=>import('./List'), props:{ name:'Lao Wang', age:20, sex:"male" } //オブジェクトモード } 、
props: [,'name','age','sex']、コンポーネント テンプレートで受信
(3) 機能モード:
props 属性を宣言します。関数の場合のみ、戻りオブジェクトを通じて渡したいパラメータを返し、対応するテンプレートで受け取ることができます。
例: { path:'/goods', Component:Goods, props:()=>{ //関数モード return { name:'Lao Wang', age:20, sex:" Male" } } },
props: [,'name','age','sex']、コンポーネント テンプレートで受信