>  기사  >  웹 프론트엔드  >  uniapp에서 페이지 간 참조를 구현하는 방법(2가지 방법)

uniapp에서 페이지 간 참조를 구현하는 방법(2가지 방법)

PHPz
PHPz원래의
2023-04-14 15:34:123200검색

유니앱에서는 한 페이지에서 다른 페이지의 내용을 참조해야 하는 경우가 많습니다. 여기서는 페이지 간 참조를 구현하는 두 가지 방법을 소개합니다.

방법 1: 페이지 경로 사용

페이지 경로를 사용하여 다른 페이지를 소개할 수 있습니다. 예:

<template>
  <view>
    <other-page></other-page>
  </view>
</template>

<script>
  import OtherPage from '@/pages/other-page/other-page.vue'
  export default {
    components: {
      OtherPage
    }
  }
</script>

위 예에서는 템플릿 > 태그에 <other-page>를 사용했습니다. 그런 다음 스크립트 섹션에 다른 페이지의 vue 구성 요소를 소개하고 해당 구성 요소를 구성 요소에 등록합니다. 이러한 방식으로 이 페이지의 <other-page>를 사용하여 다른 페이지의 콘텐츠를 참조할 수 있습니다. <other-page>标签,然后在script部分引入了另一个页面的vue组件,并且在components中注册了该组件。这样,我们就可以在本页面中使用<other-page>来引用另一个页面的内容。

需要注意的是,这里的路径@/pages/other-page/other-page.vue是相对于项目根目录的,实际路径可能会根据项目结构不同而有所区别。

方法二:使用Page组件的navigateTo方法

另一种方法是使用Page组件的navigateTo方法,例如:

<template>
  <view>
    <button @click="goToOtherPage">跳转到另一个页面</button>
  </view>
</template>

<script>
  export default {
    methods: {
      goToOtherPage() {
        uni.navigateTo({
          url: '/pages/other-page/other-page'
        })
      }
    }
  }
</script>

在上面的例子中,我们在template中使用了一个按钮,然后在script部分编写了goToOtherPage方法,在该方法中使用了uni.navigateTo方法来跳转到另一个页面。需要注意的是,路径'/pages/other-page/other-page'

여기서 @/pages/other-page/other-page.vue 경로는 프로젝트 루트 디렉터리에 상대적이라는 점에 유의하세요. 실제 경로는 프로젝트 구조에 따라 달라질 수 있습니다.

방법 2: Page 구성 요소의 NaviTo 메소드를 사용합니다🎜🎜또 다른 방법은 Page 구성 요소의 NaviTo 메소드를 사용하는 것입니다. 예를 들면 다음과 같습니다. 🎜rrreee🎜위 예에서는 템플릿에 버튼을 사용한 다음 작성했습니다. 스크립트 섹션에서는 goToOtherPage 메소드가 사용되며, 이 메소드에서는 다른 페이지로 이동하기 위해 uni.navigateTo 메소드가 사용됩니다. 주의할 점은 '/pages/other-page/other-page' 경로는 실제 페이지의 경로로 채워져야 하며, 매개변수, 쿼리, 기타 정보도 포함될 수 있다는 점입니다. 🎜🎜위의 두 가지 방법 모두 Uniapp에 다른 페이지의 콘텐츠를 도입할 수 있으며, 어떤 방법을 선택하든 자신의 필요와 프로젝트 구조에 따라 선택할 수 있습니다. 🎜

위 내용은 uniapp에서 페이지 간 참조를 구현하는 방법(2가지 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.