uniapp에서 라우팅을 사용하는 팁

uniapp에서 라우팅 사용 팁

1. 개요
uniapp 개발에서 라우팅은 매우 중요한 측면으로, 페이지 간 점프와 전송 매개변수를 구현할 수 있습니다. 이 기사에서는 uniapp의 라우팅 사용법을 소개하고 구체적인 코드 예제를 제공합니다.

2. 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'
   });

3. 유니앱 라우팅 매개변수 전송
유니앱에서는 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);
    }
}

4. 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에서 라우팅을 사용하는 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!