Comment sauter avec des paramètres dans vue.js-Voir.js-php.cn

Comment sauter avec des paramètres dans vue.js

coldplay.xixi

Libérer： 2020-11-30 16:59:08

original

3207 Les gens l'ont consulté

Méthode de saut Vue.js avec paramètres : créez d'abord [readDetail.vue] et enregistrez l'itinéraire dans [index.js], puis passez par [router-link], ou via la méthode [$router] 】 ; saut.

Comment sauter avec des paramètres dans vue.js

L'environnement d'exploitation de ce tutoriel : système windows10, vue2.5.2, cet article est applicable à toutes les marques d'ordinateurs.

[Articles connexes recommandés : vue.js]

Méthode Vue.js de saut avec paramètres :

Créez d'abord readDetail.vue et enregistrez la route dans index.js.

Méthode de livraison de la page :

1. Sauter via le lien du routeur

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

Copier après la connexion

chemin -> également la valeur de nom configurée dans le fichier de routage. Les deux peuvent être utilisés pour la navigation de routage
params -> forme de clé:valeur
requête -> Les paramètres sont transmis via l'url et sont également transmis sous forme de clé:valeur

2. $saut en mode routeur

this.$router.push({name:&#39;路由命名&#39;,params:{参数名:参数值,参数名:参数值}})
 this.$router.push({  
            path: &#39;yourPath&#39;,   
            name: &#39;要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找&#39;,  
            params: {   
                key: &#39;key&#39;,   
                msgKey: this.msg  
            }  
            /*query: {  
                key: &#39;key&#39;,   
                msgKey: this.msg  
            }*/  
        })

Copier après la connexion

Méthode d'acceptation

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

Copier après la connexion

Expérience (incluant deux méthodes) :

Page de livraison :

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

Copier après la connexion

Page de réception :

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

Copier après la connexion