1. <router-link> モードジャンプ
1. キャリー クエリ パラメータ
<router-link to="/detail ?id=001&title=メッセージ 001 "> メッセージ 001</router-link>
<ルーターリンク:to="{
名前: '詳細',
パス: '/詳細',
クエリ: {
ID: '001',
タイトル：「メッセージ001」
}
}"
注: このメソッドは動的ルーティング構成を必要としません。to 属性オブジェクトの形式で名前とパスのいずれかを選択するだけです。
この時点で、ブラウザのアドレス バーのアドレスは http://localhost:8080/detail?id=001&title=message 001 です。
受信パラメータは次のとおりです。
$route.query.xxx
2. パラメータパラメータを運ぶ
<router-link :to="`/detail /${id}/${title} `"> { {タイトル}} </router-link>
<ルーターリンク:to="{
名前: '詳細',
パス: '/詳細',パラメータ: {
ID: '001',
タイトル：「メッセージ001」
}
}"
注: このメソッドはルーティング構成を変更する必要があり、to のオブジェクト形式でルーティングを一致させるために使用できるのは名前のみです。
{
名前: '詳細',
パス: '/詳細/:id/:タイトル'
コンポーネント: 詳細
}
この時点で、ブラウザのアドレス バーのアドレスは http://localhost:8080/detail/001/message 001 です。
受信パラメータは次のとおりです。
$route.params.xxx
3. パラメータを props 属性に変換する
ルートを構成するときに props 属性を使用して、props 属性を持つコンポーネントの params/query によって運ばれるパラメーターを受け取ることができるため、使用時に直接使用でき、$route.params.xxx/ は必要ありません。 $route.query.xxx フォームアップ
構成方法:
{
name:'detail',
path:'/detail',
component: Detail,
/**
方式一，值为对象，对象中的key-value会以props的形式传递给Detail组件，
但是传递的值都是一样的，不推荐
props: {
id: '123',
title: '消息001',
},
**/
/**
方式二，值为布尔值，若布尔值为真，就会把该组件收到的所有params参数，以props的形式传式传递给Detail组件， 但之这种方式只适用于params参数
props: true,
**/
/**
方式三，值为函数，内置传参$route，可以使用结构赋值形式
**/
props({query}){
return {id: query.id, title: query.title}
},また、構造再構築の一形態を学びました
props({ クエリ: { ID, タイトル } }) {
return {ID、タイトル}
2. プログラムによるジャンプ ルーティング
ルーティングをジャンプさせるコードを書くと、ジャンプする方法が 2 つあります。1 つはプッシュ、もう 1 つは置換です。これらはすべて $router 上の関数です (VueRouter プロトタイプに存在します)。このとき、パラメータを運ぶ方法は次のとおりです。
this.$router.push({
name: 'detail',
params: {
id: xxx,
title: xxx
},
/**
query: {
id: xxx,
title: xxx
}
**/
})
this.$router.replace({
name: 'detail',
params: {
id: xxx,
title: xxx
},
/**
query: {
id: xxx,
title: xxx
}
**/
}) 注: ジャンプする方法に関係なく、ラベルで異なるパラメーターを受け取りたい場合は、ルーティング構成で/:プレースホルダーを使用する必要があります。そうしないと、最初に開いたときに取り込まれたパラメーターしか受け取ることができません。
最後に書く：
ご意見、ご感想がありましたらコメントお願いします。誰か記事の間違いを見つけたらコメント欄で指摘してください〜