Sprungseite der Uniapp-Unterkomponente mit Parametern

Uniapp bietet als plattformübergreifendes Entwicklungsframework eine sehr praktische komponentenbasierte Entwicklungsmethode, die es uns ermöglicht, die Seite in kleine und prägnante Unterkomponenten aufzuteilen und so die Wartbarkeit und Skalierbarkeit des Codes zu verbessern. In der tatsächlichen Entwicklung werden wir jedoch auf Situationen stoßen, in denen wir Seitensprünge in Unterkomponenten durchführen und Parameter übergeben müssen, was ein gewisses Verständnis der Routing- und Parameterübergabemechanismen in Uniapp erfordert.

1. Uniapp-Routing

Der Routing-Mechanismus in Uniapp verwendet Vue-Router und unterstützt daher die native Routing-Definition und API von Vue.js. Wir wissen, dass das Routing für das Springen zwischen Seiten in Front-End-Anwendungen verantwortlich ist. Uniapp bietet zwei Routing-Modi:

1. H5-Modus: Das Routing springt über URLs und die unterste Ebene verwendet die Verlaufs-API.
2. APP-Modus: Das Routing erfolgt über das native APP-Framework und die unterste Ebene verwendet die native API.

Die Art und Weise, Routen in Uniapp zu definieren, ist die gleiche wie in Vue.js. Wir definieren Routen in index.js im Router-Ordner. Lassen Sie uns dies anhand eines einfachen Beispiels veranschaulichen:

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

Der obige Code definiert eine Routing-Regel, um das Stammverzeichnis auf die HelloWorld-Komponente zu verweisen. Diese Komponente wird auf der Seite gerendert, wenn wir auf die Stammroute des Projekts zugreifen. In der tatsächlichen Entwicklung müssen wir Routing-Regeln basierend auf spezifischen Geschäftsanforderungen definieren.

2. Seitensprung

1. Deklarative Navigation: Springen Sie zu anderen Seiten, indem Sie das Router-Link-Tag in der Vorlage verwenden.

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

2. Programmatische Navigation: Springen Sie zu anderen Seiten über die Methode $router.push oder $router.replace.

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

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

3. Die Übergabe von Seitenparametern erfolgt in Uniapp wie in Vue.js. Sie wird tatsächlich durch Attribute wie Abfrage, Parameter, Meta und Requisiten vervollständigt. Beachten Sie jedoch, dass beim Routing in Uniapp empfohlen wird, Parameter zum Übergeben von Parametern zu verwenden. Da die Abfrage im Allgemeinen zum Übergeben von Parametern in der URL verwendet wird und die native APP auch die Seitenwiederherstellung durchführen muss, wird die Verwendung von Parametern empfohlen.

Parameter über Router-Link-Tag übergeben

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

Parameter über programmgesteuerte Navigation übergeben

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

Routing-Parameter in Routing-Regeln definieren

3. //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
       }
     ]
   })

Definieren Sie zwei Parameter, ID und Name, in Routing-Regeln Parameter über this.$route.params in der Komponente.

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

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

4. Zusammenfassung

Durch den obigen Inhalt haben wir gelernt, wie man in Uniapp zur Seite springt und Parameter übergibt. In der tatsächlichen Entwicklung können wir entsprechend den spezifischen Geschäftsanforderungen auswählen, welche Methode zum Springen und Übergeben von Parametern verwendet werden soll. In jedem Fall müssen wir darauf achten, einen guten Codierungsstil und gute Spezifikationen beizubehalten, damit der Code einfach zu warten und zu erweitern ist.

Das obige ist der detaillierte Inhalt vonSprungseite der Uniapp-Unterkomponente mit Parametern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!