vue+queryの受け渡しパラメータの詳細説明

今回は、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: &#39;/B&#39;,params:{name:&#39;zs&#39;,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')
  }

があります。 コンポーネント A では、パラメーターは以前に params,

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: &#39;/B&#39;,query:{name:&#39;张飞&#39;,age:22}}">跳转B组件</router-link>

ジャンプ後のブラウザのアドレスは http://localhost:8080/#/B?name=zzz&age=22 になります

これと同じです。$router.push(...)

 <router-link :to="{path:&#39;/B/123&#39;}">
    跳转B组件</router-link>
  </p>

{
   path: '/B/:name',
   name: 'B',
   component: require('../components/B')
  }

価値があります

this.$route.params.name

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

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