vue routingのジャンプパラメータの受け渡しについて詳しく解説

#ルート ジャンプ

1. 宣言型ルート ジャンプ# (パラメータなし)

router-link

タグを介してジャンプし、dom 構造内で name または path を使用します。 a tag にレンダリングされます。 注: router-link
のリンクが '/' の場合、ルート ルート Start から開始します。 start には '/' が含まれておらず、現在のルートから開始されます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">     &lt;router-link :to=&quot;{name:&amp;#39;home&amp;#39;}&quot;&gt;   &lt;router-link :to=&quot;{path:&amp;#39;/home&amp;#39;}&quot;&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> (パラメータ付き) [関連する推奨事項:

vue.js ビデオ チュートリアル

] 注:

params
パラメータを渡します ( post) ルート設定 path: "/home/:id"
path
が設定されていない場合、ルート ジャンプを要求して渡すことができます。ページを更新するとパラメータが失われます。 設定 path
、更新して購入すると ID は保持されます <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;router-link :to=&quot;{name:&amp;#39;home&amp;#39;, params: {id:1}}&quot;&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;router-link :to=&quot;{name:&amp;#39;home&amp;#39;, query: {id:1}}&quot;&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> ルート ジャンプによって渡されたパラメータを取得します:

html
this.$route.params.id 経由で $route.params.id、script

を渡します2. プログラムによるルーティング ホップ転送

1. 文字列形式

router.push('home')

2. オブジェクト形式

router.push({ path: 'home' })router.push({ name: 'user'})

3. 関数

内での呼び出し (パラメータなし)

this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})

（query

パラメータを渡す）<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">this.$router.push({name:'home',query: {id:'1'}})this.$router.push({path:'/home',query: {id:'1'}})</pre><div class="contentsignin">ログイン後にコピー</div></div>

html

パラメータを取得$route.query.idscript
パラメータを取得this.$route.query.id (params
パラメータを渡す) name
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">this.$router.push({name:'home',params: {id:'1'}})</pre><div class="contentsignin">ログイン後にコピー</div></div> のみ# 使用できます ##html

パラメータの取得

$route.params.id、script パラメータの取得this.$route.params.id 3.

query

と params##query の違いは ## と似ています#get

, ジャンプ後、ページ

url は ?id=1 と同様のパラメーターで結合されます。重要でないものはこのように渡すことができます。パスワードなどについては、params を使用してページを更新します。ID は post と同様に params

に残ります。 、ページ

url はパラメータで結合されませんが、ページ id# は更新されます。## は消えます

以上がvue routingのジャンプパラメータの受け渡しについて詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。