uniapp의 일반적인 라우팅 및 페이지 점프 API는 무엇입니까?

Uniapp은 Vue.js 기반의 크로스 플랫폼 애플리케이션 개발 프레임워크로, 통합된 구문 사양과 캡슐화된 API를 통해 미니 프로그램, H5, 앱 등 멀티 플랫폼 애플리케이션의 신속한 구축을 지원하고 풍부한 라우팅 및 페이지를 제공합니다. 점프.애플리케이션 간 점프와 페이지 간 상호작용을 실현하는 API입니다.

Uniapp의 공통 라우팅 및 페이지 점프 API를 자세히 소개하겠습니다.

Routing

라우팅은 애플리케이션 간의 점프 규칙을 의미하며 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는 경로에 해당하는 컴포넌트를 나타냅니다.

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를 트리거하면 됩니다. 구성요소 간 점프를 달성할 수 있습니다.

Page Jump API

Uniapp은 NavigateTo, RedirectTo, SwitchTab, reLaunch 등 다양한 페이지 점프 API를 제공합니다. 이러한 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은 애플리케이션의 탭 페이지를 여는 데 사용됩니다. 페이지는 매개변수를 전달할 수 없습니다. 탭 페이지에서 onLoad를 통해 구현할 수 있습니다.

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

4. reLaunch

reLaunch는 모든 페이지를 닫고 새 페이지를 여는 데 사용되며, 새 페이지는 uni.navigateBack을 통해 현재 페이지로 돌아갈 수 있습니다.

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

요약

이 글에서는 Uniapp의 공통 라우팅 및 페이지 점프 API를 자세히 소개합니다. 라우팅 및 페이지 점프는 이러한 API를 유연하게 구성하고 사용함으로써 페이지 간 점프를 구현할 수 있습니다. 페이지 간의 상호 작용은 사용자에게 더 나은 경험과 더 나은 서비스를 제공합니다.

위 내용은 uniapp의 일반적인 라우팅 및 페이지 점프 API는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!