《UniApp 页面导航跳转全解笔记》

一、前提：UniApp 的页面架构

在 UniApp 中，导航跳转分两类：

• ✅ 页面级跳转 （pages/ 下的页面）

• ✅ 组件内跳转（如封装的按钮、商品卡片、导航栏内跳转）

组件不能直接使用路由标签 <navigator> 跳转到外部页面（除非放在页面模板中），

所以组件中通常使用 uni.navigateTo()、uni.switchTab() 等 API。

🧭跳转方式总览

方法	说明	适用场景
uni.navigateTo()	跳转到非 tabBar 页面，可返回	普通页面跳转
uni.redirectTo()	关闭当前页跳转	替换当前页
uni.switchTab()	跳转到 tabBar 页面	首页、我的、分类等底部导航
uni.reLaunch()	关闭所有页面跳转	登录后跳主页面
uni.navigateBack()	返回上一个页面	返回按钮
<navigator>	模板跳转标签	H5 / 简单页面跳转

二、页面级跳转

✅ 1. 普通页面跳转

// 在组件或页面内
goDetail(id) {
  uni.navigateTo({
    url: `/pages/detail/detail?id=${id}`
  });
}


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

✅ 2. 跳转到 tabBar 页面

⚠️ 注意：switchTab() 只能跳转到 pages.json 里配置过的 tabBar 页面，否则无效。

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

✅ 3. 替换当前页面（登录成功）

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

✅ 4. 清空所有页面并跳转（重启导航栈）

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

✅ 5. 返回上一个页面

goBack() {
  uni.navigateBack({
    delta: 1
  });
}

(1) 普通跳转（保留当前页，可返回）
uni.navigateTo({
  url: '/pages/home/home?id=123', // 支持路径+参数
  success: () => console.log('跳转成功'),
  fail: (err) => console.log('跳转失败', err)
});
 
(2) 重定向（关闭当前页，不可返回）
uni.redirectTo({
  url: '/pages/login/login'
});
 
(3) TabBar 页面跳转
uni.switchTab({
  url: '/pages/tabbar/index'
});
 
(4) 返回上一页
uni.navigateBack({
  delta: 1 // 返回层数
});
 
 

三、组件方式实现跳转 <navigator>

1、<navigator>是什么？

<navigator> 是 UniApp 的内置导航组件 ，

它在 H5、小程序、App 端都能直接使用，作用类似于 HTML 的 <a> 标签。

✅ 它的主要功能是：点击后 自动跳转到指定页面，无需写 JS 代码。

官网：navigator | uni-app官网

<navigator url="/pages/about/about">
  <view class="btn">跳转到关于页面</view>
</navigator>

点击后会自动跳转到 /pages/about/about 页面。

⚠️ 注意：

目标页面必须已经在 pages.json 中注册，否则跳转无效。

2、常用属性说明

属性名	类型	说明
url	String	跳转的目标路径（必须是已注册的页面）
open-type	String	跳转方式（默认 navigate）
hover-class	String	点击时的样式类名
hover-start-time	Number	按住后多久出现点击态，默认 50ms
hover-stay-time	Number	手指松开后保留点击态时间，默认 600ms
target	String	指定跳转的目标，默认 self（当前小程序）

open-type（跳转类型）：

值	说明	是否返回上页
navigate	保留当前页跳转	✅
redirect	关闭当前页跳转	❌
switchTab	跳转到 tabBar 页面	❌
reLaunch	关闭所有页面后打开	❌
navigateBack	返回上一个页面	✅
exit	退出应用（仅 App）	❌

✅ 示例一：普通跳转
<navigator url="/pages/detail/detail" open-type="navigate">
  查看详情
</navigator>

✅ 示例二：跳转到 tabBar 页面 （只能跳转到 pages.json 中 tabBar 列表里定义的页面。）
<navigator url="/pages/index/index" open-type="switchTab">
  回到首页
</navigator>

✅ 示例三：重启并跳转（清空栈）
<navigator url="/pages/login/login" open-type="reLaunch">
  返回登录页
</navigator>

✅ 示例四：返回上一页
<navigator open-type="navigateBack" delta="1">
  返回
</navigator>

💡五、hover-class（点击态样式）
<navigator
  url="/pages/detail/detail"
  hover-class="active"
>
  <view class="btn">跳转详情</view>
</navigator>

<style>
.active {
  opacity: 0.6;
  transform: scale(0.98);
}
</style>

🎯 六、动态参数传递
可以像 URL 一样拼接参数：
<navigator url="/pages/detail/detail?id=123&type=book">
  跳转并传参
</navigator>

在目标页面接收：
onLoad(options) {
  console.log(options.id, options.type)
}