halaman lompat subkomponen uniapp dengan parameter

Sebagai rangka kerja pembangunan merentas platform, Uniapp menyediakan kaedah pembangunan berasaskan komponen yang sangat mudah, membolehkan kami membahagikan halaman kepada subkomponen yang kecil dan ringkas, sekali gus meningkatkan kebolehselenggaraan dan kebolehskalaan kod. Walau bagaimanapun, dalam pembangunan sebenar, kami akan menghadapi situasi di mana kami perlu melakukan lompatan halaman dalam sub-komponen dan perlu lulus parameter, yang memerlukan kami mempunyai pemahaman tertentu tentang penghalaan dan mekanisme lulus parameter dalam Uniapp.

1. Penghalaan Uniapp

Mekanisme penghalaan dalam Uniapp menggunakan vue-router, jadi ia menyokong definisi penghalaan asli dan API Vue.js. Kami tahu bahawa penghalaan bertanggungjawab untuk melompat antara halaman dalam aplikasi bahagian hadapan Uniapp menyediakan dua mod penghalaan:

1. Mod H5: penghalaan melompat melalui URL, dan lapisan bawah menggunakan API sejarah.
2. Mod APP: Penghalaan melompat melalui rangka kerja APP asli dan lapisan bawah menggunakan API Asli.

Cara untuk menentukan laluan dalam Uniapp adalah sama seperti Vue.js Kami mentakrifkan laluan dalam index.js di bawah folder penghala. Mari kita ilustrasikan dengan contoh mudah:

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

Kod di atas mentakrifkan peraturan penghalaan untuk menghalakan direktori akar ke komponen HelloWorld. Komponen ini akan diberikan ke halaman apabila kami mengakses laluan akar projek. Dalam pembangunan sebenar, kita perlu mentakrifkan peraturan penghalaan berdasarkan keperluan perniagaan tertentu.

2. Lompat halaman

1. Navigasi deklaratif: Lompat ke halaman lain dengan menggunakan teg pautan penghala dalam templat.

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

2. Navigasi terprogram: Lompat ke halaman lain melalui kaedah $router.push atau $router.replace.

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

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

3. Lulus parameter halaman

Dalam uniapp, hantaran parameter halaman adalah sama seperti Vue.js Ia sebenarnya diselesaikan melalui atribut seperti pertanyaan, param, meta dan prop . Walau bagaimanapun, satu perkara yang perlu diambil perhatian ialah apabila penghalaan dalam uniapp, adalah disyorkan untuk menggunakan params untuk menghantar parameter. Oleh kerana pertanyaan biasanya digunakan untuk menghantar parameter dalam URL dan APP asli juga perlu mengendalikan pemulihan halaman, adalah disyorkan untuk menggunakan param.

1. Melalui parameter melalui teg pautan penghala

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

2. Melalui parameter melalui navigasi program

<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. Dalam penghalaan Parameter penghalaan

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

ditakrifkan dalam peraturan penghalaan Dua parameter, id dan nama, ditakrifkan dalam peraturan penghalaan Kita boleh mendapatkan parameter melalui ini.$route.params dalam komponen.

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

Melalui kandungan di atas, kami telah mempelajari cara untuk melompat ke halaman dan lulus parameter dalam sub-komponen dalam Uniapp. Dalam pembangunan sebenar, kita boleh memilih kaedah yang hendak digunakan untuk melompat dan melepasi parameter mengikut keperluan perniagaan tertentu. Sama ada cara, kita perlu memberi perhatian untuk mengekalkan gaya pengekodan dan spesifikasi yang baik untuk menjadikan kod mudah diselenggara dan dilanjutkan.

Atas ialah kandungan terperinci halaman lompat subkomponen uniapp dengan parameter. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!