vue.jsでパラメータを指定してジャンプする方法

パラメータを使用した Vue.js ジャンプ メソッド: まず [readDetail.vue] を作成し、[index.js] にルートを登録し、次に [router-link] または [$router] ] メソッドを介してジャンプします。ジャンプ。

このチュートリアルの動作環境: Windows10 システム、vue2.5.2、この記事はすべてのブランドのコンピューターに適用されます。

【おすすめ関連記事：vue.js】

vue.jsのパラメータ付きジャンプ方法：

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

ページ配信方法:

1. Jump through router-link

<router-link   
    :to="{  
        path: &#39;yourPath&#39;,     
        params: {   
            key: &#39;value&#39;, // orderNum : this.searchData.orderNo
        },  
        query: {  
           key: &#39;value&#39;, // orderNum : this.searchData.orderNo
        }  
    }">  
    <button type="button">跳转</button> </router-link>

• path -> はジャンプするルーティング パスです。ルーティング ファイルに設定された名前の値でもあります。どちらもルーティング ナビゲーションに使用できます

• ##params -> は送信されるパラメータであり、パラメータはフォームで直接渡すことができますof key:value

• 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 :to="{ name: &#39;readDetail&#39;, params: { msgKeyOne: &#39;jump test.&#39; }}">
                <button type="button">跳转</button>
              </router-link><button @click="sendParams">传递</button>-----------------------------------------------------------------------------------------export default {
    name: &#39;reads&#39;,
    data () {
      return {
        msg: &#39;msg test.&#39;
      }
    },

受信ページ:

<div class="container">
    <p style="color:red;">Num：{{ myIndex }}</p>
    <p>{{ msg }}</p>
  </div>-----------------------------------------------------------data () {
      return {
        msg: &#39;&#39;,
        // 保存传递过来的index
        myIndex: &#39;&#39;
      }-----------------------------------------------------------mounted: function () {
      this.msg = this.$route.params.msgKeyOne      this.myIndex = this.$route.params.msgKey
      console.log(this.myIndex)
    }

関連する無料学習の推奨事項:

javascript (ビデオ)

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