Home > Web Front-end > uni-app > How to implement page redirection in uniapp

How to implement page redirection in uniapp

王林
Release: 2023-12-17 13:01:41
Original
1365 people have browsed it

How to implement page redirection in uniapp

Uniapp is a cross-platform application development framework through which multi-terminal application development can be quickly realized. In Uniapp, it is very simple to implement page redirection, which can be achieved through the uni.redirectTo method. Below I will introduce in detail how to implement page redirection in Uniapp and provide relevant code examples.

1. Instructions for using the uni.redirectTo method
The uni.redirectTo method is used to close the current page and jump to other pages within the application. When a redirect occurs, the current page will be closed and cannot be returned to.

2. Specific code examples
The following is a sample code to demonstrate how to implement page redirection in Uniapp:

  1. In the click event of the original page A, through uni The .redirectTo method jumps to the target page B:
// 页面A的点击事件处理函数
<template>
  <view @click="redirectToPageB">跳转到页面B</view>
</template>

<script>
export default {
  methods: {
    redirectToPageB() {
      uni.redirectTo({
        url: '/pages/pageB' // 目标页面的路径
      });
    }
  }
}
</script>
Copy after login
  1. In the target page B, add a button to return to the previous page, and implement the return function through the uni.navigateBack method:
// 页面B的返回按钮事件处理函数
<template>
  <view>
    <view>这是页面B</view>
    <button @click="goBack">返回上一级页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>
Copy after login

Through the above code example, we can see that when clicking an element on page A, the uni.redirectTo method jumps to page B, and in page B The function of returning to the previous page is implemented through the uni.navigateBack method.

3. Summary
Through the uni.redirectTo method, we can implement page redirection in Uniapp. Just call the uni.redirectTo method in the event handler of the original page and pass in the path of the target page.

It should be noted that the path of the page in Uniapp needs to start with /, and the path does not need to add a file suffix.

The above is an introduction and code example on how to implement page redirection in Uniapp. I hope it will be helpful to you.

The above is the detailed content of How to implement page redirection in uniapp. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template