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

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

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

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>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

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>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

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>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

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>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

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>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

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>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

获取跳转页面的参数

• 描述：在目标页面的 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>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22

3.其他跳转

1. uni.navigateToMiniProgram：

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

uni.navigateToMiniProgram({
  appId: 'targetAppId',
  path: 'targetPath',
  extraData: {
    key: 'value'
  },
  success: function () {
    console.log('跳转成功');
  }
});
1
2
3
4
5
6
7
8
9
10

2. uni.redirectToMiniProgram：

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

uni.redirectToMiniProgram({
  appId: 'targetAppId',
  path: 'targetPath',
  extraData: {
    key: 'value'
  },
  success: function () {
    console.log('跳转成功');
  }
});
1
2
3
4
5
6
7
8
9
10

3. uni.navigateToNative：

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

uni.navigateToNative({
  pageName: 'targetPage',
  params: {
    key: 'value'
  }
});
1
2
3
4
5
6