uni-app 页面自动跳转

uni-app 页面自动跳转

alit + 点击 组件名称，自动跳转到组件的所在的文件

1 回复

更多关于uni-app 页面自动跳转的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中实现页面自动跳转，可以通过编程的方式在页面的生命周期函数、事件处理函数或某些业务逻辑中实现。uni-app 提供了 uni.navigateTo、uni.redirectTo、uni.reLaunch 和 uni.switchTab 等 API 来实现不同类型的页面跳转。

以下是一些示例代码，展示了如何在不同场景下实现页面自动跳转：

1. 在页面加载时自动跳转

可以在 onLoad 生命周期函数中实现页面加载后的自动跳转。

// pages/index/index.vue
<script>
export default {
    onLoad() {
        // 页面加载时自动跳转到另一个页面
        uni.navigateTo({
            url: '/pages/target/target'
        });
    }
}
</script>

2. 在按钮点击事件中实现跳转

可以在按钮的点击事件处理函数中实现跳转。

<!-- pages/index/index.vue -->
<template>
    <view>
        <button @click="navigateToTarget">跳转到目标页面</button>
    </view>
</template>

<script>
export default {
    methods: {
        navigateToTarget() {
            uni.navigateTo({
                url: '/pages/target/target'
            });
        }
    }
}
</script>

3. 使用 redirectTo 替换当前页面

redirectTo 方法用于关闭当前页面，跳转到应用内的某个页面。

// pages/index/index.vue
<script>
export default {
    onLoad() {
        // 使用 redirectTo 替换当前页面
        uni.redirectTo({
            url: '/pages/target/target'
        });
    }
}
</script>

4. 使用 reLaunch 重新启动应用

reLaunch 方法用于关闭所有非 tabBar 页面，跳转到应用内的某个页面。

// pages/index/index.vue
<script>
export default {
    onLoad() {
        // 使用 reLaunch 重新启动应用
        uni.reLaunch({
            url: '/pages/target/target'
        });
    }
}
</script>

5. 跳转到 tabBar 页面

switchTab 方法用于跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

// pages/index/index.vue
<script>
export default {
    onLoad() {
        // 跳转到 tabBar 页面
        uni.switchTab({
            url: '/pages/home/home'
        });
    }
}
</script>

以上示例展示了如何在 uni-app 中实现页面自动跳转。根据具体需求，可以选择合适的 API 和实现方式。

回到顶部