路由

• father::uniapp
• child::获取页面
• 基础

梗概

Uni App 提供5种路由跳转方法，用于不同场景：保留当前页、关闭当前页、清空所有页面、Tab栏切换和返回上一页。所有方法都是异步操作，支持传递参数。

路由跳转方法详解

核心方法对比

方法	功能	页面栈变化	适用场景
uni.navigateTo	保留当前页跳转	新页面入栈	普通页面跳转
uni.redirectTo	关闭当前页跳转	当前页出栈，新页面入栈	替换当前页面
uni.reLaunch	关闭所有页跳转	清空页面栈，新页面入栈	重启应用到指定页
uni.switchTab	跳TabBar页	清空页面栈，只保留TabBar页	Tab页面切换
uni.navigateBack	返回上页	页面出栈	返回操作

详细用法

uni.navigateTo()

保留当前页面，跳转到应用内的某个页面

uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=test',
  success: function(res) {
    console.log('跳转成功');
  },
  fail: function(err) {
    console.log('跳转失败', err);
  }
});

• 页面栈限制：最多10层
• 不能跳转到tabBar页面
• 可通过getCurrentPages()获取页面栈

uni.redirectTo()

关闭当前页面，跳转到应用内的某个页面

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

• 不能跳转到tabBar页面
• 当前页面会被销毁，触发onUnload生命周期

uni.reLaunch()

关闭所有页面，打开到应用内的某个页面

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

• 可以跳转到任意页面（包括tabBar页面）
• 清空整个页面栈，常用于登录后跳转

uni.switchTab()

跳转到tabBar页面，并关闭其他所有非tabBar页面

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

• 只能跳转到在pages.json中配置的tabBar页面
• 不能传递参数（URL中的参数会被忽略）

uni.navigateBack()

关闭当前页面，返回上一页面或多级页面

// 返回上一页
uni.navigateBack();
 
// 返回上两页
uni.navigateBack({
  delta: 2
});

• delta参数：返回的页面数，默认为1
• 如果delta大于现有页面数，则返回到首页

参数传递与接收

传递参数

uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=张三&type=user'
});

接收参数

在目标页面的onLoad生命周期中接收：

// pages/detail/detail.vue
export default {
  onLoad(options) {
    console.log('id:', options.id);     // 123
    console.log('name:', options.name); // 张三
    console.log('type:', options.type); // user
  }
}

注意事项

• 页面路径必须以/开头
• 路径不能包含.vue等后缀
• tabBar页面只能通过uni.switchTab或uni.reLaunch跳转
• 所有跳转方法都是异步的，可以使用Promise或async/await
• 页面栈溢出时会自动丢弃最底层页面