Apakah penghalaan biasa dan API lompat halaman bagi uniapp?

Uniapp ialah rangka kerja pembangunan aplikasi merentas platform berdasarkan Vue.js Melalui spesifikasi sintaks bersatu dan API terkapsul, ia menyokong pembinaan pantas aplikasi berbilang platform seperti program mini, H5 dan Aplikasi penghalaan dan halaman Lompat API untuk merealisasikan lompatan antara aplikasi dan interaksi antara halaman.

Mari perkenalkan penghalaan biasa Uniapp dan API lompat halaman secara terperinci:

Penghalaan

Penghalaan merujuk kepada peraturan lompat antara aplikasi Uniapp menyediakan pelbagai kaedah konfigurasi Penghalaan termasuk global konfigurasi penghalaan, konfigurasi khusus halaman, konfigurasi penghalaan komponen, dll. Penghalaan boleh merealisasikan lompatan pantas antara aplikasi dan pemindahan parameter antara halaman.

1. Konfigurasi penghalaan global

Konfigurasi penghalaan global merangkumi semua peraturan penghalaan aplikasi dan dikonfigurasikan dalam fail utama.js Kaedah khusus adalah seperti berikut:

import App from './App'

// 全局路由配置
const router = uni.createRouter({
    routes: [
        {
            path: '/home',
            name: 'home',
            component: () => import('@/pages/home/index.vue')
        },
        {
            path: '/category',
            name: 'category',
            component: () => import('@/pages/category/index.vue')
        },
        {
            path: '/goods/:id',
            name: 'goods',
            component: () => import('@/pages/goods/index.vue')
        },
        //...
    ]
})

App.mpType = 'app'
App.router = router
App.vue = new Vue({
    router,
    render: h => h(App)
}).$mount()

Dalam konfigurasi penghalaan global, berbilang peraturan penghalaan boleh ditakrifkan Setiap peraturan penghalaan mengandungi tiga atribut: laluan, nama dan komponen. Antaranya, laluan mewakili laluan laluan, nama mewakili nama laluan, dan komponen mewakili komponen yang sepadan dengan laluan.

Dalam Uniapp, lompatan penghalaan boleh dilaksanakan melalui API seperti uni.navigateTo, uni.switchTab, uni.reLaunch, dll. Seterusnya, kami akan memperkenalkan penggunaan API ini secara terperinci.

2. Konfigurasi penghalaan halaman-eksklusif

Konfigurasi penghalaan halaman-eksklusif membolehkan anda mentakrifkan peraturan penghalaan untuk halaman tertentu dan menulis peraturan penghalaan dalam konfigurasi halaman kaedah adalah seperti berikut:

<template>
  <view class="container">
      <!-- ... -->
  </view>
</template>

<script>
export default {
  name: 'home',
  // 页面独享配置
  onUniNaviationBarTap(){
    uni.navigateTo({
      url:'/pages/category/index'
    })
  }
}
</script>

<style>
/* ... */
</style>

Dalam konfigurasi eksklusif halaman, anda boleh menentukan berbilang peraturan penghalaan dan mencetuskannya dalam bentuk acara Peristiwa ini termasuk onLoad, onShow, onUnload, onHide, dsb.

3. Konfigurasi penghalaan komponen

Konfigurasi penghalaan komponen boleh merealisasikan lompatan penghalaan antara komponen dan menulis peraturan penghalaan dalam komponen Kaedah khusus adalah seperti berikut:

<template>
  <view class="container" @click="goToGoodsDetail">
      <!-- ... -->
  </view>
</template>

<script>
export default {
  name: 'product-card',
  methods: {
    goToGoodsDetail() {
      uni.navigateTo({
        url: '/pages/goods/index?id=' + this.goodsId
      })
    },
  },
  props: {
    goodsId: {
      type: String,
      required: true,
    },
  },
}
</script>

<style>
/* ... */
</style>

Melompat antara komponen boleh dicapai dengan mentakrifkan peraturan penghalaan dalam komponen dan mencetuskan uni.navigateTo.

API Lompat Halaman

Uniapp menyediakan pelbagai API lompat halaman, termasuk navigateTo, redirectTo, switchTab, reLaunch, dll. Melalui API ini, lompatan pantas antara aplikasi boleh dicapai dan parameter lulus antara muka surat.

1. navigateTo

navigateTo ialah salah satu API lompat halaman yang paling biasa digunakan untuk membuka halaman baharu pada halaman semasa ke melalui halaman semasa uni.navigateBack.

uni.navigateTo({
  url: '/pages/category/index'
})

Dalam navigateTo, url mewakili laluan halaman untuk melompat ke, yang boleh menjadi laluan relatif atau laluan mutlak.

2. redirectTo

redirectTo digunakan untuk menutup halaman semasa dan membuka halaman baharu Halaman baharu tidak boleh kembali ke halaman semasa melalui uni.navigateBack.

uni.redirectTo({
  url: '/pages/category/index'
})

3. switchTab

switchTab digunakan untuk membuka halaman Tab aplikasi Halaman tidak boleh melepasi parameter Operasi permulaan boleh dilaksanakan melalui onLoad pada halaman Tab .

uni.switchTab({
  url: '/pages/home/index'
})

4. reLaunch

reLaunch digunakan untuk menutup semua halaman dan membuka halaman baharu Halaman baharu boleh kembali ke halaman semasa melalui uni.navigateBack.

uni.reLaunch({
  url: '/pages/login/index'
})

Ringkasan

Artikel ini memperkenalkan penghalaan biasa dan API lompat halaman Uniapp secara terperinci Dalam pembangunan aplikasi, penghalaan dan lompatan halaman adalah bahagian yang sangat penting Melalui konfigurasi fleksibel dan Menggunakan API ini, lompatan antara aplikasi dan interaksi antara halaman boleh direalisasikan, membawa pengguna pengalaman yang lebih baik dan perkhidmatan yang lebih baik.

Atas ialah kandungan terperinci Apakah penghalaan biasa dan API lompat halaman bagi uniapp?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!