page de saut du sous-composant Uniapp avec paramètres

Uniapp, en tant que framework de développement multiplateforme, fournit une méthode de développement basée sur des composants très pratique, nous permettant de diviser la page en sous-composants petits et concis, améliorant ainsi la maintenabilité et l'évolutivité du code. Cependant, dans le développement réel, nous rencontrerons des situations dans lesquelles nous devrons effectuer des sauts de page dans les sous-composants et transmettre des paramètres, ce qui nous oblige à avoir une certaine compréhension des mécanismes de routage et de transmission de paramètres dans Uniapp.

1. Routage Uniapp

Le mécanisme de routage d'Uniapp utilise vue-router, il prend donc en charge la définition de routage natif et l'API de Vue.js. Nous savons que le routage est responsable du saut entre les pages dans les applications frontales. Uniapp propose deux modes de routage :

1. Mode H5 : le routage saute à travers les URL et la couche inférieure utilise l'API d'historique.
2. Mode APP : le routage passe par le framework APP natif et la couche inférieure utilise l'API native.

La façon de définir les routes dans Uniapp est la même que dans Vue.js. Nous définissons les routes dans index.js sous le dossier du routeur. Illustrons avec un exemple simple :

//router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

Le code ci-dessus définit une règle de routage pour pointer le répertoire racine vers le composant HelloWorld. Ce composant sera rendu sur la page lorsque nous accéderons à la route racine du projet. Dans le développement réel, nous devons définir des règles de routage basées sur des besoins métier spécifiques.

2. Saut de page

1. Navigation déclarative : accédez à d'autres pages en utilisant la balise router-link dans le modèle.

<template>
  <div>
    <router-link to="/">HelloWorld</router-link>
    <router-link to="/About">About</router-link>
  </div>
</template>

2. Navigation programmatique : accédez à d'autres pages via la méthode $router.push ou $router.replace.

<template>
  <div>
    <button @click="gotoAbout()">去About页面</button>
  </div>
</template>

<script>
export default {
  data(){
    return {}
  },
  methods:{
    gotoAbout(){
      this.$router.push("/About")
    }
  }
}
</script>

3. Passage des paramètres de page

Dans uniapp, le passage des paramètres de page est le même que dans Vue.js. Il est en fait complété via des attributs tels que la requête, les paramètres, les méta et les accessoires. Cependant, une chose à noter est que lors du routage dans uniapp, il est recommandé d'utiliser des paramètres pour transmettre les paramètres. Étant donné que la requête est généralement utilisée pour transmettre des paramètres dans l'URL et que l'application native doit également gérer la récupération de page, il est recommandé d'utiliser des paramètres.

1. Transmettre les paramètres via la balise router-link

<template>
  <div>
    <router-link :to="{name: 'About', params: {id: 1, name: '张三'}}">About</router-link>
  </div>
</template>

2. Transmettre les paramètres via la navigation programmatique

<template>
  <div>
    <button @click="gotoAbout()">去About页面</button>
  </div>
</template>

<script>
export default {
  data(){
    return {}
  },
  methods:{
    gotoAbout(){
      this.$router.push({name: 'About', params: {id: 1, name: '张三'}})
    }
  }
}
</script>

3. Définir les paramètres de routage dans les règles de routage

//router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/About/:id/:name',
      name: 'About',
      component: About
    }
  ]
})

Définir deux paramètres, l'identifiant et le nom, dans les règles de routage. Nous pouvons obtenir. paramètres via this.$route.params dans le composant.

<template>
  <div>
    <h1>这是About页面</h1>
    <h2>{{this.$route.params.id}}</h2>
    <h2>{{this.$route.params.name}}</h2>
  </div>
</template>

<script>
export default {
  data(){
    return {}
  }
}
</script>

4. Résumé

Grâce au contenu ci-dessus, nous avons appris comment accéder à la page et transmettre des paramètres dans les sous-composants dans Uniapp. Dans le développement réel, nous pouvons choisir la méthode à utiliser pour sauter et transmettre des paramètres en fonction des besoins spécifiques de l'entreprise. Quoi qu’il en soit, nous devons veiller à maintenir un bon style de codage et de bonnes spécifications pour rendre le code facile à maintenir et à étendre.

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!