Vue では、router-link タグはページにジャンプするために使用されます。実際、これはコンパイル プロセス中に従来の a タグに変換されます。to のポイントは href リンクですが、従来の a タグではパラメータを渡しますというのはほとんど非常に面倒なことですが、vue なら簡単にやってくれます。
Vue2 と Vue3 は同じ方法でパラメーターを渡します。これについては、以下で順番に紹介します。
1つ目は直接使用することですか？to=".index"?age=18&sex="male" などのステッチ このURLはブラウザのアドレスバーに直接表示されます。
2 つ目は、クエリを使用して to={path:"/index",query:{name:"cat",age:18}} などのパラメータを渡す方法です。クエリは上記のようにアドレス バーに直接表示されます。つまり、/index?name="cat"&age=18、
3 番目は、to={name:"index",params:{name:"dog",num:10}} などの params パラメーターの受け渡しですが、このパラメーター受け渡しの方法はブラウザーのアドレス バーには表示されません。 1 点は、params にパラメータを渡すのに使用できるのは name 属性のみであり、path を使用した場合、パラメータは無視されます。
vue のルーターでプッシュ メソッドと置換メソッドを使用する、プログラムによるルーティング ナビゲーションもあります。
vue2 および 3 では this.$router.push({name:"index",params:{age:18,name:"cat"}}) または直接スプライシングを使用します。
his.$router.push(`/index/${age}/${name}`) の replace メソッドは Push と似ているため、ここでは詳しく説明しません。
しかし、渡されたパラメータはどうやって取得するのでしょうか?
vue2 では $route.query.name を使用します。クエリを使用してパラメータを渡す場合、params を使用する場合は、$route.params.name になります。
vue3 では、最初に useRoute useRouter を導入し、次に、route=useRoute() などの変数を使用して初期化します。
router=useRouter(),ルーターにはプッシュメソッドと置換メソッドがあり、渡されたパラメータを受け入れたい場合はルートを使用する必要があります。クエリを使用してパラメータを渡す場合、route.query には渡したパラメータが含まれます。 params を使用して渡す。クエリを params に置き換えるだけです。
ページに正常にジャンプすると、キーパラメータ ID が渡されましたが、ページを更新するとパラメータが欠落していることがわかります。このとき、ルート フォルダー配下の Index.js/ts にパスを設定する必要があります。 、index/:id など、再度更新しても失われません。この状況は params パラメータの受け渡しにのみ当てはまり、クエリ パラメータの受け渡しによって更新ページのパラメータが失われることはありません。