今回は、vue+queryでパラメータを渡す手順について詳しく説明します。vue+queryでパラメータを渡す際の注意事項を実際に見てみましょう。
私は最近 Vue を勉強しています。この記事では、vue パラメータとクエリ パラメータの使用方法を紹介します。そして、自分用にメモを残します。
宣言型:
プログラミング: router.push(...)
どちらのメソッドでも、前回の記事に引き続き、コンポーネント A を介してコンポーネント B にジャンプ リンクを実装し、パラメーターを渡すことができます。
1. router.push を使用します
router/index.js
export default new Router({ routes: [ { path: '/', name: 'A', component: require('../components/A') }, { path: '/B/:name/:age', name: 'B', component: require('../components/B') } ] })
上記では、
routingのコンポーネント B に 2 つのパラメーター name と age を追加します。 Aコンポーネント、@clickイベントをバインドし、Bコンポーネントにジャンプしてparams
<template> <p> <!---只允许有一个最外层标签 !--> <p> <p>{{message}}</p> <p @click="toBFun">跳转B组件啊啊</p> <!--<router-link :to="{ path: '/B',params:{name:'zs',age:22}}">跳转B组件啊啊</router-link>--> </p> </p> </template> <script> export default { data: function () { return { message: 'vue好帅啊!' } }, methods: { toBFun: function(){ this.$router.push({name:'B',params:{name:'xy',age:22}}); } } } </script> <style> </style>
を使用してパラメータを渡します このとき、ブラウザには http://localhost:8080/#/B/xy/22 が表示されます クエリ
値の転送とアドレスの変更
を見てみましょう
また、router/index.js ルーティング ファイルには、変更されていない 2 つのパラメータ名、age {
path: '/B/:name/:age',
name: 'B',
component: require('../components/B')
}
this.$router.push({name:'B',params:{name:'xy',age:22}});
を介して渡されていました。 交換後、クエリ
this.$router.push({name:'B',query:{name:'xy',age:22}});
この時点で、ブラウザは http://localhost:8080/#/?name=xy&age=22 を見つけます
上記の 2 つの方法により、ページが更新された後もパラメータが保持されます。
値の取得は少し異なります:
params: this.$route.params.name; クエリ:this.$route.query.name;
------------------------ 別の方法もあります ------------------- ------- -----------------------
ルーターリンクを使用します
<router-link :to="{ path: '/B',query:{name:'张飞',age:22}}">跳转B组件</router-link>
ジャンプ後のブラウザのアドレスは http://localhost:8080/#/B?name=zzz&age=22 になります
これと同じです。$router.push(...)
<router-link :to="{path:'/B/123'}"> 跳转B组件</router-link> </p>
{ path: '/B/:name', name: 'B', component: require('../components/B') }
価値があります
this.$route.params.name
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がvue+queryの受け渡しパラメータの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。