uniapp页面跳转和路由导航教程

最新推荐文章于 2025-08-23 15:35:10 发布

原创最新推荐文章于 2025-08-23 15:35:10 发布 · 459 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端 #vue.js #数据库 #css3 #bootstrap

本文详细介绍了在UniApp中如何使用uni.navigateTo进行页面跳转，包括配置和示例代码。同时讲解了uni.switchTab和uni.reLaunch用于路由导航的功能及其用法。

页面跳转

在uniapp中，可以使用uni.navigateTo方法进行页面跳转。该方法接受一个对象参数，其中url为跳转的页面路径，可以是绝对路径也可以是相对路径。

1、在跳转页面的触发事件中添加跳转代码，示例代码如下：

uni.navigateTo({
  url: '/pages/detail/detail'
})

2、在目标页面的配置文件中，需要在pages数组中添加对应的页面路径，示例代码如下：

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ]
}

3、在目标页面的vue文件中，可以通过uni-app提供的组件和方法完成页面渲染和数据绑定，示例代码如下：

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

<script>
export default {
  data() {
    return {
      content: '这是详情页面'
    }
  }
}
</script>

路由导航

在uniapp中，可以使用uni.switchTab和uni.reLaunch方法进行路由导航。其中，uni.switchTab用于跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面；uni.reLaunch用于关闭所有页面，然后跳转到指定页面。

4、使用uni.switchTab进行路由导航，示例代码如下：

uni.switchTab({
  url: '/pages/index/index'
})

5、使用uni.reLaunch进行路由导航，示例代码如下：

uni.reLaunch({
  url: '/pages/index/index'
})