uniapp でページ間の参照を実装する方法 (2 つの方法)

Uniapp では、1 つのページ内で別のページのコンテンツを参照する必要があることがよくあります。ここでは、ページ間の参照を実装する 2 つの方法を紹介します。

方法 1: ページ パスを使用する

ページ パスを使用して別のページを紹介できます。たとえば、次のようになります。

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

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

上の例では、 template <other-page> タグを追加し、スクリプト部分に別ページの vue コンポーネントを導入し、コンポーネントに登録します。このようにして、このページの <other-page> を使用して、別のページのコンテンツを参照できます。

ここでのパス @/pages/other-page/other-page.vue はプロジェクトのルート ディレクトリからの相対パスであることに注意してください。実際のパスはプロジェクトによって異なる場合があります。構造に違いがあります。

方法 2: 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>

上記の例では、 , we テンプレートではボタンを使用し、スクリプト部分では goToOtherPage メソッドを記述し、その中で uni.navigateTo メソッドを使用して別のページにジャンプします。パス '/pages/other-page/other-page' は実際のページのパスとして入力する必要があり、パラメーターやクエリなどの情報も含めることができることに注意してください。

上記のどちらの方法でも、別のページのコンテンツを Uniapp に導入できますが、どちらの方法を選択するかは、ご自身のニーズやプロジェクトの構造に応じて選択してください。

以上がuniapp でページ間の参照を実装する方法 (2 つの方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。