Passer des paramètres via les paramètres de l'attribut Vue $route

Cet article présente principalement les paramètres passant par l'attribut Vue $route. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

passage de la valeur vue. Passer des paramètres avec vue sont deux choses différentes

Carte conceptuelle

Principe

Le principe du passage des paramètres de vue réside principalement dans Vue.$route.params (également $route.query)

$route est l'attribut de Vue, params est l'attribut de $route, utilisez Pour stocker des paires clé-valeur de données (forme d'objet, {key:value}), stockez-y de nombreux attributs (paires clé-valeur, attributs, valeurs d'attribut)

List :

En naviguant à l'aide du plug-in vue devtools (plug-in de l'outil de développement vue), vous pouvez voir les données spécifiques à l'intérieur de l'attribut $route :

$route.params, **Cela peut être a dit que $route est un conteneur intermédiaire**, utilisé Les paramètres d'adaptation sont une méthode de paire clé-valeur, de cette façon, lors de l'exécution d'une action sur cette page, les paramètres sont transmis à $route.params, et sur une autre page, le. les paramètres peuvent être obtenus à partir de $route.params C'est tout

Définir

//router >> index.js
{
        path: '/Page9/:abc/:cde',
        name: 'Page9',
        component: Page9
    }

dans la route signifie que je veux stocker les attributs "abc" et "cde" dans Vue.$route.params, qui sont utilisés comme noms d'attribut et noms de clé,

et la valeur de l'attribut est déterminée par le changement du chemin de déclenchement après avoir cliqué sur la route. souhaitez transmettre, par exemple,

//App.vue
<router-link to="/Page9/gigi/lkjdk7338">
          点击就跳转到page9,并同时传参到Vue.$route.params
</router-link>

//Page9.vue
<template>
    <p class="page1">
        <h1>{{ msg }}</h1>
        <p>{{this.$route.params}}</p>
        <h3 @click="nsj">拿数据</h3>
    </p>
</template>

<script>
    export default{
        name:&#39;Page9&#39;,
        data(){
            return{
                msg:&#39;I am Page9.vue&#39;
            }
        },
        methods:{
            nsj(){
                this.msg = this.$route.params.asd
            }
        }
        
    }
</script>

signifie que la dernière Vue $route.params stockera {"abc" : "gigi" ,"cde" : "lkjdk7338">

ou utiliser le routage de programmation, dans le script Écrivez les paramètres à passer en js :

html:

<p><button @click="sj1">点击就跳转到page9,并同时传参到</button></p>

js:

sj1() {
                this.$router.push({
                    path: '/Page9',
                    name: 'Page9',
                    params: {
                        abc: this.mydata,
                        cde: 'dlj'
                    }
                })

Cela signifie qu'à la fin Vue.$route.params stockera {"abc": This.mydata data, "cde" : ''dlj''>

Comment obtenir la valeur :

C'est très simple :
Obtenez-le simplement directement depuis Vue.$route.params
{{ $route.params.abc }} "gigi" ou la valeur spécifique de this.mydata

{{ $route.params.abc }} --> " lkjdk7338 "

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde. étude. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Méthode de configuration du chemin non racine vue-router+nginx

Comment vue résout l'ajout dynamique de addRoutes Le problème de rafraîchissement invalide après le routage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!