ホームページ >ウェブフロントエンド >フロントエンドQ&A >vuejsでジャンプするときにパラメータを渡す方法

vuejsでジャンプするときにパラメータを渡す方法

青灯夜游
青灯夜游オリジナル
2021-09-24 18:46:382865ブラウズ

Vue のパラメーターをジャンプする方法: 1. router-link タグの params または query 属性を通じてパラメーターをジャンプします; 2. "this.$router.push({name:'Route Naming' ,params: {パラメータ名:パラメータ値..}})」ステートメントを使用して、パラメータの転送にジャンプします。

vuejsでジャンプするときにパラメータを渡す方法

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

まずreadDetail.vueを作成し、index.jsにルートを登録します。

ページ配信方法:

1. router-link 経由でジャンプ

<router-link>  
    <button>跳转</button> 
</router-link> 

 1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航  
 2. params -> 是要传送的参数,参数可以直接key:value形式传递  
 3. query -> 是通过 url 来传递参数的同样是key:value形式传递

2. $router メソッド経由でジャンプ

this. $router .push({name:'ルート命名',params:{パラメータ名:パラメータ値,パラメータ名:パラメータ値}})

 this.$router.push({  
            path: 'yourPath',   
            name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找',  
            params: {   
                key: 'key',   
                msgKey: this.msg  
            }  
            /*query: {  
                key: 'key',   
                msgKey: this.msg  
            }*/  
        })

受け入れ方法

    ##this .$route.params.パラメータ名
  • this.$route.query.パラメータ名
  • 実験(2つのメソッドを含む):

送信ページ:

 <router-link>
                <button>跳转</button>
              </router-link>
<button>传递</button>
-----------------------------------------------------------------------------------------
export default {
    name: 'reads',
    data () {
      return {
        msg: 'msg test.'
      }
    },

受信ページ:

<p>
    </p><p>Num:{{ myIndex }}</p>
    <p>{{ msg }}</p>
  
-----------------------------------------------------------
data () {
      return {
        msg: '',
        // 保存传递过来的index
        myIndex: ''
      }
-----------------------------------------------------------
mounted: function () {
      this.msg = this.$route.params.msgKeyOne
      this.myIndex = this.$route.params.msgKey
      console.log(this.myIndex)
    }

実験結果:

vuejsでジャンプするときにパラメータを渡す方法関連推奨事項:《

vue. js チュートリアル

>>

以上がvuejsでジャンプするときにパラメータを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。