博客站

在 UniApp 中，页面跳转是实现应用导航的核心功能。UniApp 提供了多种方式来实现页面跳转，包括 声明式导航 和 编程式导航。以下是 UniApp 中实现页面跳转的常用方法：

一、声明式导航

声明式导航是通过在模板中使用 <navigator> 组件来实现页面跳转。

1. 基本用法

• 使用 url 属性指定目标页面的路径。
• 示例：

  <navigator url="/pages/detail/detail">跳转到详情页</navigator>
  

2. 跳转类型

• navigateTo：保留当前页面，跳转到目标页面（可返回）。
• redirectTo：关闭当前页面，跳转到目标页面（不可返回）。
• switchTab：跳转到 TabBar 页面（用于 TabBar 切换）。
• reLaunch：关闭所有页面，跳转到目标页面。
• navigateBack：返回上一页面或多级页面。

示例：

<navigator open-type="navigateTo" url="/pages/detail/detail">跳转到详情页</navigator>
<navigator open-type="redirectTo" url="/pages/detail/detail">重定向到详情页</navigator>
<navigator open-type="switchTab" url="/pages/tabbar/tabbar">切换到 TabBar 页面</navigator>
<navigator open-type="reLaunch" url="/pages/index/index">重启到首页</navigator>

二、编程式导航

编程式导航是通过调用 UniApp 提供的 API 来实现页面跳转。

1. uni.navigateTo

• 保留当前页面，跳转到目标页面（可返回）。
• 示例：

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

2. uni.redirectTo

• 关闭当前页面，跳转到目标页面（不可返回）。
• 示例：

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

3. uni.switchTab

• 跳转到 TabBar 页面（用于 TabBar 切换）。
• 示例：

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

4. uni.reLaunch

• 关闭所有页面，跳转到目标页面。
• 示例：

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

5. uni.navigateBack

• 返回上一页面或多级页面。
• 示例：

  uni.navigateBack({
    delta: 1 // 返回的页面层数
  });
  

三、传递参数

在页面跳转时，可以通过 URL 传递参数。

1. 传递参数

• 在 URL 中添加查询字符串。
• 示例：

  uni.navigateTo({
    url: '/pages/detail/detail?id=1&name=UniApp'
  });
  

2. 接收参数

• 在目标页面的 onLoad 生命周期函数中获取参数。
• 示例：

  export default {
    onLoad(options) {
      console.log('页面参数：', options.id, options.name);
    }
  };
  

四、跳转到外部链接

UniApp 支持跳转到外部链接（如 H5 页面）。

1. 使用 uni.navigateTo

• 示例：

  uni.navigateTo({
    url: 'https://example.com'
  });
  

2. 使用 WebView 组件

• 在页面中嵌入 WebView 组件来加载外部链接。
• 示例：

  <template>
    <web-view src="https://example.com"></web-view>
  </template>
  

五、总结

UniApp 提供了丰富的页面跳转方式，开发者可以根据需求选择合适的方法：

• 声明式导航：使用 <navigator> 组件，适合简单的页面跳转。
• 编程式导航：使用 UniApp 的 API，适合复杂的跳转逻辑。
• 传递参数：通过 URL 传递参数，实现页面间的数据共享。
• 跳转到外部链接：支持跳转到 H5 页面或使用 WebView 加载外部链接。

以下是一个完整的示例，展示了页面跳转和参数传递的用法：

<template>
  <view>
    <navigator url="/pages/detail/detail?id=1&name=UniApp">跳转到详情页</navigator>
    <button @click="navigateToDetail">编程式跳转</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToDetail() {
      uni.navigateTo({
        url: '/pages/detail/detail?id=2&name=UniApp'
      });
    }
  }
};
</script>

<style>
</style>

在目标页面（detail.vue）中接收参数：

<template>
  <view>
    <text>ID: {{ id }}</text>
    <text>Name: {{ name }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      name: ''
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.name = options.name;
  }
};
</script>

<style>
</style>