uniapp常見的路由與頁面跳轉api是什麼

Uniapp是一款基於Vue.js的跨平台應用開發框架，透過統一的語法規範和封裝的API，支援快速建立小程式、H5、App等多平台應用，同時提供了豐富的路由和頁面跳轉API來實現應用程式之間的跳轉和頁面之間的互動。

下面我們來詳細介紹Uniapp常見的路由與頁面跳轉API：

路由

路由是指應用程式之間的跳躍規則，Uniapp提供了多種路由的設定方式，包括全域路由配置、頁面獨享配置、元件路由配置等，透過路由可以實現應用程式之間的快速跳轉和頁面之間的參數傳遞。

1. 全域的路由配置

全域的路由配置包含了應用程式的所有路由規則，在main.js檔案中進行配置，具體方法如下：

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()

在全域路由配置中，可以定義多個路由規則，每個路由規則包含了path、name和component三個屬性。其中，path表示路由的路徑，name表示路由的名稱，component表示路由對應的元件。

在Uniapp中，路由的跳躍可以透過uni.navigateTo、uni.switchTab、uni.reLaunch等API來實現，接下來我們將詳細介紹這些API的用法。

2. 頁面獨享的路由設定

頁面獨享的路由設定可以針對特定頁面進行路由規則的定義，將路由規則寫在頁面的設定中，具體方法如下：

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

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

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

在頁面獨享配置中，可以定義多個路由規則，以事件的形式觸發，這些事件包括onLoad、onShow、onUnload、onHide等。

3. 元件路由設定

元件路由設定可以實現元件之間的路由跳轉，將路由規則寫在元件中，具體方法如下：

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

透過在元件中定義路由規則，並觸發uni.navigateTo，就可以實現元件之間的跳躍。

頁面跳轉API

Uniapp提供了多種頁面跳轉的API，包括navigateTo、redirectTo、switchTab、reLaunch等，透過這些API，可以實現應用程式之間的快速跳躍和頁面之間的參數傳遞。

1. navigateTo

navigateTo是最常用的頁面跳轉API之一，用於在目前頁面開啟一個新頁面，新頁面可以透過uni.navigateBack回到當前頁面。

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

在navigateTo中，url表示跳轉的頁面路徑，可以是相對路徑或絕對路徑。

2. redirectTo

redirectTo用於關閉目前頁面並開啟新頁面，新頁面不可以透過uni.navigateBack返回目前頁面。

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

3. switchTab

switchTab用於開啟應用程式的Tab頁面，頁面無法傳遞參數，可以在Tab頁面透過onLoad實作初始化操作。

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

4. reLaunch

reLaunch用於關閉所有頁面並開啟一個新頁面，新頁面可以透過uni.navigateBack返回目前頁面。

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

總結

本文詳細介紹了Uniapp常見的路由與頁面跳轉API，在應用開發中，路由與頁面跳轉是非常重要的一環，透過靈活的設定和使用這些API，可以實現應用程式之間的跳躍和頁面之間的交互，為用戶帶來更好的體驗和更優質的服務。

以上是uniapp常見的路由與頁面跳轉api是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！