Uniapp是一款基於Vue.js的跨平台應用開發框架，透過統一的語法規範和封裝的API，支援快速建立小程式、H5、App等多平台應用，同時提供了豐富的路由和頁面跳轉API來實現應用程式之間的跳轉和頁面之間的互動。
下面我們來詳細介紹Uniapp常見的路由與頁面跳轉API：
路由
路由是指應用程式之間的跳躍規則，Uniapp提供了多種路由的設定方式，包括全域路由配置、頁面獨享配置、元件路由配置等，透過路由可以實現應用程式之間的快速跳轉和頁面之間的參數傳遞。
全域的路由配置包含了應用程式的所有路由規則，在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的用法。
頁面獨享的路由設定可以針對特定頁面進行路由規則的定義，將路由規則寫在頁面的設定中，具體方法如下：
<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等。
元件路由設定可以實現元件之間的路由跳轉，將路由規則寫在元件中，具體方法如下：
<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，可以實現應用程式之間的快速跳躍和頁面之間的參數傳遞。
navigateTo是最常用的頁面跳轉API之一，用於在目前頁面開啟一個新頁面，新頁面可以透過uni.navigateBack回到當前頁面。
uni.navigateTo({
url: '/pages/category/index'
})在navigateTo中，url表示跳轉的頁面路徑，可以是相對路徑或絕對路徑。
redirectTo用於關閉目前頁面並開啟新頁面，新頁面不可以透過uni.navigateBack返回目前頁面。
uni.redirectTo({
url: '/pages/category/index'
})switchTab用於開啟應用程式的Tab頁面，頁面無法傳遞參數，可以在Tab頁面透過onLoad實作初始化操作。
uni.switchTab({
url: '/pages/home/index'
})reLaunch用於關閉所有頁面並開啟一個新頁面，新頁面可以透過uni.navigateBack返回目前頁面。
uni.reLaunch({
url: '/pages/login/index'
})總結
本文詳細介紹了Uniapp常見的路由與頁面跳轉API，在應用開發中，路由與頁面跳轉是非常重要的一環，透過靈活的設定和使用這些API，可以實現應用程式之間的跳躍和頁面之間的交互，為用戶帶來更好的體驗和更優質的服務。
以上是uniapp常見的路由與頁面跳轉api是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
