How to implement references between pages in uniapp (two methods)

In Uniapp, we often need to reference the content of another page in one page. Here we introduce two methods to implement references between pages.

Method 1: Using the page path

We can use the page path to introduce another page, for example:

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

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

In the above example, we used it in the template <other-page> tag, then introduce the vue component of another page in the script part, and register the component in components. In this way, we can use <other-page> in this page to reference the content of another page.

It should be noted that the path here @/pages/other-page/other-page.vue is relative to the project root directory. The actual path may vary depending on the project structure. There is a difference.

Method 2: Use the navigateTo method of the Page component

Another method is to use the navigateTo method of the Page component, for example:

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

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

In the above example, we A button is used in the template, and the goToOtherPage method is written in the script part, in which the uni.navigateTo method is used to jump to another page. It should be noted that the path '/pages/other-page/other-page' should be filled in as the path of the actual page, and can also contain information such as parameters and query.

Both of the above methods can introduce the content of another page into Uniapp. Which method to choose can be chosen according to your own needs and project structure.

The above is the detailed content of How to implement references between pages in uniapp (two methods). For more information, please follow other related articles on the PHP Chinese website!