So springen Sie mit Parametern in vue.js

Vue.js-Methode zum Springen mit Parametern: Erstellen Sie zuerst [readDetail.vue] und registrieren Sie die Route in [index.js]; springen Sie dann über [router-link] oder springen Sie über [$router].

Die Betriebsumgebung dieses Tutorials: Windows10-System, vue2.5.2, dieser Artikel gilt für alle Computermarken.

【Empfohlene verwandte Artikel: vue.js】

vue.js Methode zum Springen mit Parametern:

Erstellen Sie zuerst readDetail.vue und registrieren Sie die Route in index.js.

Seitenübermittlungsmethode:

1. Durch Router-Link springen

<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>

• Pfad -> kann der in der Routing-Datei konfigurierte Namenswert sein, beides kann Route erfolgen navigation

• params -> sind die zu übertragenden Parameter, die Parameter können direkt in Form eines Schlüssels übergeben werden: value

• query -> ist der über die URL übergebene Parameter, der ebenfalls übergeben wird die Form von Schlüssel:Wert

2. $router-Methodensprung

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  
            }*/  
        })

Akzeptierende Methode

this.$route.params.参数名
this.$route.query.参数名

Experiment (einschließlich zwei Methoden):

Lieferseite:

 <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;
      }
    },

Empfangsseite:

<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)
    }

Related kostenlose Lernempfehlungen : Javascript (Video)

Das obige ist der detaillierte Inhalt vonSo springen Sie mit Parametern in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!