uniapp 컴포넌트에서 페이지로 이동하는 방법-uni-app-php.cn

uniapp 컴포넌트에서 페이지로 이동하는 방법

PHPz

풀어 주다： 2023-04-18 16:02:44

원래의

2081명이 탐색했습니다.

Uniapp은 풍부한 구성 요소와 API를 갖춘 크로스 플랫폼 모바일 개발 프레임워크로, 개발자가 효율적인 모바일 애플리케이션을 신속하게 만들 수 있습니다. 동시에 uniapp은 다양한 구성 요소와 페이지 간 이동도 지원하므로 매우 편리하고 실용적입니다. 이번 글에서는 uniapp 컴포넌트를 사용하여 해당 페이지로 점프하는 방법과 주의사항에 대해 중점적으로 다루겠습니다.

1. uniapp 구성 요소가 페이지로 이동하는 방법

uniapp에는 라우팅 점프, 이벤트 청취, 탐색 모음 버튼 등을 포함하여 구성 요소가 페이지로 이동하는 방법이 많이 있습니다. 아래에서는 이러한 방법을 자세히 소개하겠습니다.

루트 점프

루트 점프를 통해 지정된 페이지로 점프할 수 있습니다. uniapp에서는 vue-router를 사용하여 경로 점프를 구현할 수 있습니다.

먼저 프로젝트에 vue-router 인스턴스를 생성하고 라우팅을 구성합니다.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]
})

export default router

로그인 후 복사

위 경로에는 두 개의 페이지가 있습니다. 하나는 경로가 "/home"일 때 표시되는 Home 구성 요소이고, 다른 하나는 경로가 "/detail/일 때 표시되는 Detail 구성 요소입니다. ID". :id는 세부정보 페이지로 이동할 때 전달해야 하는 데이터를 나타내는 동적 매개변수입니다.

다음으로 라우팅 점프를 수행하려면 구성 요소에서 $router를 사용하세요.

// Home.vue
export default {
  methods: {
    jumpToDetail(id) {
      this.$router.push('/detail/' + id)
    }
  }
}

// Detail.vue
export default {
  mounted() {
    const id = this.$route.params.id
  }
}

로그인 후 복사

Home 구성 요소에서 jumpToDetail 메서드를 호출하고 id 매개 변수를 전달하여 Detail 구성 요소로 이동합니다. Detail 컴포넌트에서는 this.$route.params.id를 통해 전달된 매개변수를 얻을 수 있습니다.

이벤트 듣기

이벤트 듣기를 통해 컴포넌트 내부에서 점프 이벤트를 처리할 수 있습니다.

// Home.vue
export default {
  methods: {
    jumpToDetail(id) {
      this.$emit('jumpToDetail', id)
    }
  }
}

// Detail.vue
export default {
  mounted() {
    this.$on('jumpToDetail', id => {
      // 处理跳转事件
    })
  }
}

로그인 후 복사

Home 구성 요소에서 $this.emit을 통해 사용자 정의 "jumpToDetail" 이벤트를 트리거하고 id 매개 변수를 전달합니다. Detail 컴포넌트에서는 this.$on을 통해 "jumpToDetail" 이벤트를 수신하고 전달된 매개변수를 가져올 수 있습니다.

탐색 모음 버튼

uniapp은 탐색 모음 버튼을 통한 페이지 이동도 지원합니다.

// uniui组件库中的uni-nav-bar组件
<template>
  <uni-nav-bar @click-left="goBack" @click-right="jumpToDetail" :title="title" :left-text="leftText" :right-text="rightText"></uni-nav-bar>
</template>

로그인 후 복사

컴포넌트에서는 uni-nav-bar 컴포넌트를 사용하여 네비게이션 바를 구현하고, @click-left를 통해 왼쪽 버튼의 클릭 이벤트를 모니터링하고, @click을 통해 오른쪽 버튼의 클릭 이벤트를 모니터링할 수 있습니다. -페이지 점프를 실현할 권리.

2. 주의사항

위 방법을 사용할 때 다음 사항에 주의해야 합니다.