一、概述

在uniapp開(kāi)發(fā)中，路由是非常重要的一個(gè)方面，它可以實(shí)現(xiàn)頁(yè)面之間的跳轉(zhuǎn)和傳遞參數(shù)。本文將介紹uniapp中路由的使用技巧，并給出具體的代碼示例。

二、uniapp路由的基本使用

在uniapp中，路由的基本使用可以通過(guò)uni.navigateTo、uni.redirectTo、uni.reLaunch、uni.switchTab等API來(lái)進(jìn)行頁(yè)面跳轉(zhuǎn)。這些API的使用場(chǎng)景略有不同，具體使用取決于項(xiàng)目需求。

1.uni.navigateTo：用于打開(kāi)新頁(yè)面，并保留當(dāng)前頁(yè)面。適用于普通的頁(yè)面跳轉(zhuǎn)。

示例代碼：

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

2.uni.redirectTo：用于關(guān)閉當(dāng)前頁(yè)面，并打開(kāi)新頁(yè)面。適用于不需要返回上一頁(yè)的頁(yè)面跳轉(zhuǎn)。

示例代碼：

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

3.uni.reLaunch：關(guān)閉所有頁(yè)面，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。適用于從其他平臺(tái)掃碼進(jìn)入小程序的場(chǎng)景。

示例代碼：

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

4.uni.switchTab：跳轉(zhuǎn)到tarBar頁(yè)面，并關(guān)閉其他所有非tarBar頁(yè)面。適用于底部導(dǎo)航欄頁(yè)面之間的跳轉(zhuǎn)。

示例代碼：

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

三、uniapp路由參數(shù)的傳遞

在uniapp中，可以通過(guò)URL參數(shù)的方式來(lái)進(jìn)行頁(yè)面之間的數(shù)據(jù)傳遞。

1.頁(yè)面之間傳遞參數(shù)在頁(yè)面A跳轉(zhuǎn)到頁(yè)面B時(shí)，可以通過(guò)URL參數(shù)來(lái)傳遞數(shù)據(jù)。在A頁(yè)面的跳轉(zhuǎn)代碼中，通過(guò)拼接url的方式傳遞參數(shù)：

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

2.在B頁(yè)面中，可以通過(guò)uni.$route.query來(lái)獲取參數(shù)值：

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

頁(yè)面返回時(shí)傳遞參數(shù)

在uniapp中，可以通過(guò)uni.navigateBack方法返回上一個(gè)頁(yè)面，并通過(guò)調(diào)用上一頁(yè)頁(yè)面的onBack方法傳遞參數(shù)。具體代碼如下：

3.在A頁(yè)面中，跳轉(zhuǎn)到B頁(yè)面時(shí)，傳遞參數(shù)，并注冊(cè)上一頁(yè)頁(yè)面的onBack方法：

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

4.在B頁(yè)面中，獲取參數(shù)值，并在頁(yè)面返回時(shí)調(diào)用上一頁(yè)頁(yè)面的onBack方法傳遞參數(shù)：

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

5.在A頁(yè)面中，注冊(cè)onBack方法并接收參數(shù)：

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

四、uniapp路由攔截與權(quán)限控制

在開(kāi)發(fā)過(guò)程中，有時(shí)候需要對(duì)某些頁(yè)面進(jìn)行權(quán)限控制，以阻止未登錄用戶(hù)訪問(wèn)某些頁(yè)面。

在uniapp中，可以通過(guò)導(dǎo)航守衛(wèi)來(lái)實(shí)現(xiàn)路由攔截和權(quán)限控制。具體代碼如下：

1.創(chuàng)建全局路由攔截器，在main.js文件中：

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

2.在需要進(jìn)行權(quán)限控制的頁(yè)面配置路由元信息：

export default {
 meta: {
     requiresAuth: true // 需要登錄才能訪問(wèn)
 }
 // 省略其他代碼...
}

通過(guò)以上操作，可以實(shí)現(xiàn)對(duì)需要登錄才能訪問(wèn)的頁(yè)面進(jìn)行權(quán)限控制，未登錄用戶(hù)將被攔截并跳轉(zhuǎn)到登錄頁(yè)。

總結(jié)：

本文介紹了uniapp中路由的基本使用方法、參數(shù)傳遞方式以及路由攔截與權(quán)限控制。通過(guò)合理的使用路由，可以實(shí)現(xiàn)頁(yè)面之間的跳轉(zhuǎn)和數(shù)據(jù)傳遞，提升應(yīng)用的用戶(hù)體驗(yàn)。