Comment passer des paramètres lors du saut dans vuejs-Questions et réponses frontales-php.cn

Comment passer des paramètres lors du saut dans vuejs

青灯夜游

Libérer： 2023-01-11 09:22:12

original

2783 Les gens l'ont consulté

Méthode Vue pour sauter les paramètres : 1. Sauter les paramètres via l'attribut params ou query de la balise router-link ; 2. Passer "this.$router.push({name:'Route naming',params:{ Nom du paramètre : valeur du paramètre..}})" pour passer au transfert des paramètres.

Comment passer des paramètres lors du saut dans vuejs

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Créez d'abord readDetail.vue et enregistrez l'itinéraire dans index.js.

Méthode de livraison de la page :

1. Passer par le lien du routeur

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

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

Copier après la connexion

2. Sauter via $router

this.$router.push({name:'Route naming',params:{parameter name :parameter value , nom du paramètre : valeur du paramètre}})

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

Copier après la connexion

méthode d'acceptation

this.$route.params.Nom du paramètre
this.$route.query.Nom du paramètre

Expérience (comprend deux méthodes) :

Page de transmission :

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

Copier après la connexion

Page de réception :

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

Copier après la connexion

Résultats expérimentaux :

Comment passer des paramètres lors du saut dans vuejs