How to jump to the page in uniapp? Two ways to introduce

uni-app is a cross-platform development framework based on Vue.js. We can use it to develop applications based on H5, small programs, Android/iOS and other platforms. Among them, page jump is a very critical function. This article will introduce two common page jump methods in uni-app, namely routing jump and inter-page event communication.

1. Routing jump

Routing jump refers to jumping to different pages by changing the page URL in uni-app. uni-app provides a set of route jump APIs, including:

1. uni.navigateTo()

Use uni. navigateTo() can jump to the non-bottom navigation bar page of the application, and remember to use the uni.navigateBack() method on the target page to return to the original page, as follows:

<template>
  <view>
    <button @click="gotoPage2()">跳转到页面2</button>
  </view>
</template>

<script>
export default {
  methods: {
    gotoPage2() {
      uni.navigateTo({
        url: '/pages/page2/page2'
      })
    }
  }
}
</script>

2. uni.redirectTo()

Use uni.redirectTo() to close all current pages and open the non-bottom navigation bar page of the application, as follows ：

<template>
  <view>
    <button @click="gotoPage2()">跳转到页面2</button>
  </view>
</template>

<script>
export default {
  methods: {
    gotoPage2() {
      uni.redirectTo({
        url: '/pages/page2/page2'
      })
    }
  }
}
</script>

3. uni.reLaunch()

Use uni.reLaunch() to close all pages and open the application The non-bottom navigation bar page is as follows:

<template>
  <view>
    <button @click="gotoPage2()">跳转到页面2</button>
  </view>
</template>

<script>
export default {
  methods: {
    gotoPage2() {
      uni.reLaunch({
        url: '/pages/page2/page2'
      })
    }
  }
}
</script>

4. uni.switchTab()

Use uni.switchTab() You can jump to the bottom navigation bar page of the application, as follows:

<template>
  <view>
    <button @click="gotoTab3()">跳转到Tab3</button>
  </view>
</template>

<script>
export default {
  methods: {
    gotoTab3() {
      uni.switchTab({
        url: '/pages/tab3/tab3'
      })
    }
  }
}
</script>

2. Inter-page event communication

In addition to routing jumps, we can also achieve page jumps through inter-page event communication The effect of turning. Specifically, we can pass parameters to the child page through props in the parent page, and implement jumps in the child page through event listening.

For example, we have a parent page index.vue, which contains a button. When the button is clicked, the childEvent() event will be triggered and passed to the child page. Parameters:

<template>
  <view>
    <button @click="childEvent()">跳转到Child页面</button>
    <child :name="name" @backEvent="backEvent"></child>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: 'Mike'
    }
  },
  methods: {
    childEvent() {
      this.name = 'Jerry'
      this.$refs.child.childEvent()
    },
    backEvent(msg) {
      console.log(msg) // '我已经回来了'
    }
  }
}
</script>

In the child page child.vue, we use props to receive the parameters passed by the parent, and listen to the parent's backEvent event. When the event is triggered, perform a jump operation ：

<template>
  <view>
    <text>{{ name }}</text>
  </view>
</template>

<script>
export default {
  props: {
    name: String
  },
  methods: {
    childEvent() {
      this.$emit('backEvent', '我已经回来了')
    }
  }
}
</script>

This article introduces two common page jump methods in uni-app, including route jump and inter-page event communication. For different business needs, we can choose to use different methods for page jumps to achieve a better development experience and user experience.

The above is the detailed content of How to jump to the page in uniapp? Two ways to introduce. For more information, please follow other related articles on the PHP Chinese website!