uniapp日常总结--uniapp页面跳转方式

uniapp日常总结–uniapp页面跳转方式

UniApp（跨平台应用开发框架）是基于Vue.js的一种开发框架，可以用于同时在多个平台上构建应用程序，如iOS、Android等。在UniApp中，跳转页面通常使用uni.navigateTo、uni.redirectTo、uni.reLaunch等方法，具体方法的选择取决于你的需求。

文章目录

uniapp日常总结--uniapp页面跳转方式

1.常用跳转方式介绍

1. uni.navigateTo:

用法：uni.navigateTo({ url: '目标页面路径' })
描述：保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
示例：uni.navigateTo({ url: '/pages/detail/detail' })

<template>
  <view>
    <button @click="navigateToPage">跳转到新页面</button>
  </view>
</template>

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

2. uni.redirectTo:

用法：uni.redirectTo({ url: '目标页面路径' })
描述：关闭当前页面，跳转到应用内的某个页面。不可返回到原页面。
示例：uni.redirectTo({ url: '/pages/login/login' })

<template>
  <view>
    <button @click="redirectToPage">重定向到新页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    redirectToPage() {
      uni.redirectTo({
        url: '/pages/newPage/newPage'
      });
    }
  }
}
</script>

3. uni.reLaunch:

用法：uni.reLaunch({ url: '目标页面路径' })
描述：关闭所有页面，打开应用内的某个页面。适用于一些非常重要的页面，如应用启动页。
示例：uni.reLaunch({ url: '/pages/index/index' })

<template>
  <view>
    <button @click="reLaunchPage">重新启动应用到新页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    reLaunchPage() {
      uni.reLaunch({
        url: '/pages/newPage/newPage'
      });
    }
  }
}
</script>

4. uni.switchTab:

用法：uni.switchTab({ url: '目标页面路径' })
描述：跳转到应用内的某个tabBar页面，关闭其他所有非tabBar页面。
示例：uni.switchTab({ url: '/pages/home/home' })

<template>
  <view>
    <button @click="switchTab">切换到 tabBar 页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    switchTab() {
      uni.switchTab({
        url: '/pages/tabBarPage/tabBarPage'
      });
    }
  }
}
</script>

5. uni.navigateBack:

用法：uni.navigateBack({ delta: 1 })
描述：返回上一级页面。参数delta表示返回的层数，默认为1。
示例：uni.navigateBack({ delta: 2 })

<template>
  <view>
    <button @click="navigateBack">返回上一页</button>
  </view>
</template>

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

6. this.$router.push(location, onComplete?, onAbort?) – 不推荐使用

location（必选）: 跳转的目标路由对象或URL。可以是字符串路径，也可以是描述地址的对象。例如：
- 字符串路径：'/path/to/page'
- 对象形式：{ path: '/path/to/page', query: { key: 'value' } }
onComplete（可选）: 跳转成功时的回调函数。它会在导航成功完成时被调用，不管是通过浏览器导航还是在代码中调用。
onAbort（可选）: 跳转被中断时的回调函数。它会在导航中断时被调用，例如在导航被取消或在导航开始时调用 this.$router.go(-1)。

在使用这些方法时，需要注意页面路径的书写方式，通常以/pages/开头，后面跟着具体的页面路径。另外，可以通过在目标页面的<script>标签中配置export default来导出需要在其他页面引用的内容，例如数据、方法等。

2.异同点

参数传递： navigateTo、redirectTo、reLaunch 都支持通过 url 后面拼接参数传递数据，而 switchTab 和 navigateBack 不支持直接传递参数，需要通过其他方式实现。

关于switchTab 和 navigateBack页面传值，需要通过其他方式实现，简单介绍可以查看下方链接：

uniapp日常总结–uniapp页面传值
目的： navigateTo 用于普通页面跳转，redirectTo 用于页面重定向，reLaunch 用于关闭所有页面打开新页面，switchTab 用于切换 TabBar 页面，navigateBack 用于返回上一页。
适用场景： 选择使用哪种方法取决于你的具体业务需求。如果需要保留当前页面并跳转到新页面，可以使用 navigateTo；如果需要关闭当前页面并打开新页面，可以使用 redirectTo 或 reLaunch；如果需要切换到 TabBar 页面，可以使用 switchTab；如果需要返回上一页，可以使用 navigateBack。
参数传递方式： 除了 navigateTo、redirectTo、reLaunch 的 url 后面拼接参数外，也可以使用全局变量、本地存储等方式进行参数传递，这对于 switchTab 和 navigateBack 是特别有用的。

navigateTo、redirectTo、reLaunch 的参数传递

描述：通过 query 参数传递数据到目标页面。

代码示例：

<template>
  <view>
    <button @click="passData">传递数据到新页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    passData() {
      uni.navigateTo({
        url: '/pages/newPage/newPage?param1=value1&param2=value2'
      });
    }
  }
}
</script>

获取跳转页面的参数

描述：在目标页面的 onLoad 钩子函数中通过 options 获取跳转时传递的参数。

代码示例：

<template>
  <view>
    <text>参数1：{{ param1 }}</text>
    <text>参数2：{{ param2 }}</text>
  </view>
</template>

<script>
export default {
  onLoad(options) {
    // 获取跳转时传递的参数
    this.param1 = options.param1 || '';
    this.param2 = options.param2 || '';
  },
  data() {
    return {
      param1: '',
      param2: ''
    };
  }
}
</script>

3.其他跳转

1. uni.navigateToMiniProgram：

uni.navigateToMiniProgram 用于跳转到其他小程序。

uni.navigateToMiniProgram({
  appId: 'targetAppId',
  path: 'targetPath',
  extraData: {
    key: 'value'
  },
  success: function () {
    console.log('跳转成功');
  }
});

2. uni.redirectToMiniProgram：

uni.redirectToMiniProgram 用于关闭当前小程序，跳转到其他小程序。

uni.redirectToMiniProgram({
  appId: 'targetAppId',
  path: 'targetPath',
  extraData: {
    key: 'value'
  },
  success: function () {
    console.log('跳转成功');
  }
});

3. uni.navigateToNative：

uni.navigateToNative 用于跳转到原生页面。

uni.navigateToNative({
  pageName: 'targetPage',
  params: {
    key: 'value'
  }
});