uniapp怎么跳转页面？

百变鹏仔 2个月前 (11-20) #uniapp

文章标签跳转

uni-app 是一个基于vue.js的跨平台开发框架，我们可以用它来开发基于h5、小程序、android/ios等多平台的应用程序。其中，页面跳转是一个非常关键的功能，本文将会介绍uni-app中常见的两种页面跳转方式，分别是路由跳转和页面间事件通信。

一、路由跳转

路由跳转是指在uni-app中通过改变页面url的方式来跳转到不同的页面。uni-app提供了一套路由跳转的API，包括：

uni.navigateTo()

使用 uni.navigateTo() 可以跳转到应用的非底部导航栏页面，同时记得在目标页面使用 uni.navigateBack() 方法返回原页面，如下：

<template>  <view>    <button @click="gotoPage2()">跳转到页面2</button>  </view></template><script>export default {  methods: {    gotoPage2() {      uni.navigateTo({        url: '/pages/page2/page2'      })    }  }}</script>

uni.redirectTo()

使用 uni.redirectTo() 可以关闭当前所有页面，打开应用的非底部导航栏页面，如下：

<template>  <view>    <button @click="gotoPage2()">跳转到页面2</button>  </view></template><script>export default {  methods: {    gotoPage2() {      uni.redirectTo({        url: '/pages/page2/page2'      })    }  }}</script>

uni.reLaunch()

使用 uni.reLaunch() 可以关闭所有页面，打开应用的非底部导航栏页面，如下：

<template>  <view>    <button @click="gotoPage2()">跳转到页面2</button>  </view></template><script>export default {  methods: {    gotoPage2() {      uni.reLaunch({        url: '/pages/page2/page2'      })    }  }}</script>

uni.switchTab()

使用 uni.switchTab() 可以跳转到应用的底部导航栏页面，如下：

<template>  <view>    <button @click="gotoTab3()">跳转到Tab3</button>  </view></template><script>export default {  methods: {    gotoTab3() {      uni.switchTab({        url: '/pages/tab3/tab3'      })    }  }}</script>

二、页面间事件通信

除了路由跳转，我们还可以通过页面间事件通信来达到页面跳转的效果。具体而言，我们可以在父级页面中通过 props 给子页面传递参数，并通过事件监听来实现子页面中的跳转。

例如，我们有一个父级页面 index.vue，其中包含一个 button，点击button后会触发 childEvent()事件，并给子页面传递参数：

<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>

在子页面 child.vue 中，我们使用 props 接收父级传递的参数，并监听父级的 backEvent 事件，当事件触发时，执行跳转操作：

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

本文介绍了uni-app中常见的两种页面跳转方式，包括路由跳转和页面间事件通信。针对不同的业务需求，我们可以选择使用不同的方式进行页面跳转，以达到更好的开发体验和用户体验。

文章推荐

uniapp怎么跳转页面？

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项