kod halaman lompat uniapp

Uniapp ialah rangka kerja pembangunan merentas platform yang boleh membangunkan aplikasi yang menyokong platform berbeza seperti program mini WeChat, H5 dan Aplikasi. Dalam Uniapp, melompat ke halaman perlu dilaksanakan menggunakan mekanisme penghalaan yang disediakan oleh rangka kerja Vue.js. Artikel ini akan memperkenalkan pelaksanaan kod halaman lompat dalam Uniapp.

1. Mekanisme penghalaan Vue.js
Vue.js menyediakan mekanisme penghalaan yang berkuasa untuk memudahkan pembangun mengawal lompatan halaman dan aliran data. Dalam Vue.js, idea teras penghalaan adalah untuk memetakan komponen halaman yang berbeza ke alamat URL yang berbeza, supaya lompatan antara halaman boleh dicapai dengan menukar alamat URL. Mekanisme penghalaan terdiri daripada dua komponen teras: penghala dan paparan penghala.

1. Penghala
   Penghala ialah komponen teras yang melaksanakan penghalaan dalam Vue.js Ia bertanggungjawab untuk memantau perubahan dalam alamat URL dan memaparkan paparan halaman yang berbeza berdasarkan perubahan dalam alamat URL. Dalam Uniapp, kami boleh memulakan penghala dengan mengkonfigurasi maklumat penghalaan dalam fail pages.json. Berikut ialah contoh konfigurasi pages.json yang mudah:

{
"halaman": [

{
  "path": "pages/index/index",
  "name": "index"
},
{
  "path": "pages/detail/detail",
  "name": "detail"
}

]
}

Dalam perkara di atas contoh , kami mentakrifkan dua halaman: indeks dan perincian. Kedua-dua halaman ini sepadan dengan folder indeks dan folder butiran dalam direktori halaman masing-masing. Antaranya, atribut laluan mewakili alamat URL halaman dan atribut nama mewakili nama halaman, yang boleh digunakan untuk menjana alamat URL dalam kod secara dinamik. Dalam halaman, kita boleh menggunakan mekanisme penghalaan Vue.js untuk melompat antara halaman.

2. Paparan laluan
   Paparan laluan ialah komponen teras untuk memaparkan paparan halaman dalam Vue.js Ia memaparkan komponen halaman yang berbeza kepada alamat URL yang berbeza. Dalam Uniapp, kita perlu menggunakan komponen dalam halaman untuk memaparkan komponen paparan sepadan dengan halaman semasa. Berikut ialah contoh paparan laluan mudah: 🎜>

data() {

<h1>{{ title }}</h1>
<p>{{ content }}</p>

}

di atas Dalam contoh, kami mentakrifkan komponen halaman mudah untuk memaparkan tajuk dan sekeping kandungan. Komponen akan diberikan kepada alamat URL yang sepadan. Uniapp akan memaparkan komponen secara automatik ke halaman yang sepadan berdasarkan konfigurasi penghala.

2. Lompatan halaman dalam Uniapp

Gunakan kaedah terbina dalam $router yang disediakan oleh Vue.js

<script></ol>eksport kaedah lalai {<p>: {<br><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;button @click=&quot;goToDetail&quot;&gt;去详情页&lt;/button&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div></p>}<p>}<br></script>

di atas Dalam contohnya, kami menentukan butang dan mengikat kaedah goToDetail untuk merealisasikan fungsi melompat ke halaman butiran selepas mengklik butang. Dalam kaedah goToDetail, kami memanggil kaedah this.$router.push({ name: 'detail' }) untuk melaksanakan lompatan halaman. Parameter kaedah ini ialah objek yang mengandungi nama halaman sasaran lompat (ditakrifkan dalam pages.json).

Uniapp menyediakan satu siri antara muka API untuk melaksanakan fungsi yang berbeza. Antaranya, antara muka uni.navigateTo boleh merealisasikan fungsi lompat halaman. Berikut ialah contoh uni.navigateTo yang mudah: