uniapp中路由的使用技巧

uniapp中路由的使用技巧

一、概述​​
在uniapp開發中，路由是非常重要的一個方面，它可以實現頁面之間的跳轉和傳遞參數。本文將介紹uniapp中路由的使用技巧，並給出具體的程式碼範例。

二、uniapp路由的基本使用
在uniapp中，路由的基本使用可以透過uni.navigateTo、uni.redirectTo、uni.reLaunch、uni.switchTab等API來進行頁面跳躍。這些API的使用場景略有不同，視專案需求取決於專案需求。

1. uni.navigateTo：用於開啟新頁面，並保留目前頁面。適用於普通的頁面跳轉。
   範例程式碼：

   uni.navigateTo({
    url: '/pages/detail/detail?id=1'
   });

2. uni.redirectTo：用於關閉目前頁面，並開啟新頁面。適用於不需要回到上一頁的頁面跳轉。
   範例程式碼：

   uni.redirectTo({
    url: '/pages/home/home'
   });

3. uni.reLaunch：關閉所有頁面，開啟到應用程式內的某個頁面。適用於從其他平台掃碼進入小程式的場景。
   範例程式碼：

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

4. uni.switchTab：跳到tarBar頁面，並關閉其他所有非tarBar頁面。適用於底部導覽列頁面之間的跳轉。
   範例程式碼：

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

三、uniapp路由參數的傳遞
在uniapp中，可以透過URL參數的方式來進行頁面之間的資料傳遞。

1. 頁面之間傳遞參數
   在頁面A跳到頁面B時，可以透過URL參數來傳遞資料。在A頁面的跳躍程式碼中，透過拼接url的方式傳遞參數：

   uni.navigateTo({
    url: '/pages/detail/detail?id=' + id
   });

#在B頁面中，可以透過uni.$route.query來取得參數值：

onLoad() {
    console.log(this.$route.query.id);
}

2. 頁面返回時傳遞參數
   在uniapp中，可以透過uni.navigateBack方法傳回上一個頁面，並透過呼叫上一頁頁面的onBack方法傳遞參數。具體程式碼如下：
   在A頁面中，跳到B頁面時，傳遞參數，並註冊上一頁頁面的onBack方法：

   uni.navigateTo({
    url: '/pages/detail/detail?id=' + id + '&callback=onBack'
   });

在B頁面中，取得參數值，並在頁面返回時呼叫上一頁頁面的onBack方法傳遞參數：

methods: {
    goBack() {
        uni.navigateBack({
            delta: 1,
            success: () => {
                uni.getOpenerEventChannel().emit(this.asr_notify);
            }
        });
    }
}

在A頁面中，註冊onBack方法並接收參數：

methods: {
    onBack(data) {
        console.log(data);
    }
}

四、uniapp路由攔截與權限控制
在開發過程中，有時需要對某些頁面進行權限控制，以阻止未登入使用者存取某些頁面。

在uniapp中，可以透過導航守衛來實現路由攔截和權限控制。具體程式碼如下：

1. 建立全域路由攔截器，在main.js檔案中：

   // 全局路由拦截器
   router.beforeEach((to, from, next) => {
    const token = uni.getStorageSync('token');
    if (to.meta.requiresAuth && !token) { // 判断是否需要登录才能查看页面
        next('/pages/login/login');
    } else {
        next();
    }
   });

2. 在需要進行權限控制的頁面配置路由元資訊：

   export default {
    meta: {
        requiresAuth: true // 需要登录才能访问
    }
    // 省略其他代码...
   }

透過上述操作，可實現對需要登入才能存取的頁面進行權限控制，未登入使用者將被攔截並跳到登入頁面。

總結：
本文介紹了uniapp中路由的基本使用方法、參數傳遞方式以及路由攔截與權限控制。透過合理的使用路由，可以實現頁面之間的跳轉和資料傳遞，提升應用程式的使用者體驗。

希望這篇文章對您對於uniapp路由的使用有所幫助。

以上是uniapp中路由的使用技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！