uniapp 实现路由切或者tab切换详细步骤-平芜编程栈

uniapp 实现路由切或者tab切换详细步骤

在 UniApp 中实现页面路由和标签页（Tab）切换是核心开发技能。下面为你梳理详细步骤和不同场景的实践方案。
下面表格中帮助你快速了解 UniApp 中主要的页面跳转方式及其区别：

跳转方法	作用	适用场景	关键限制
`uni.navigateTo`	保留当前页面，跳转到新页面（可返回）	普通页面跳转，如列表页→详情页	页面栈最多10层；不能跳转至tabbar页面
`uni.redirectTo`	关闭当前页面，跳转到新页面（不可返回）	无需返回的跳转，如登录页→首页	不能跳转至tabbar页面
`uni.reLaunch`	关闭所有页面，打开新页面	应用重启场景，如退出登录→登录页	可跳转到任意页面
`uni.switchTab`	关闭所有非tabbar页面，跳转到tabbar页面	从普通页面切换回首页等tab页	只能跳转至pages.json中配置的tabbar页面
`uni.navigateBack`	返回上一页面或多级页面	详情页→列表页	通常与`navigateTo`配合使用

🔄 路由跳转详解

1. 基本跳转与传参

最常用的跳转方式是uni.navigateTo。在跳转时，可以通过URL传递参数。

// 在起始页面跳转并传递参数uni.navigateTo({url:'/pages/detail/detail?id=80&title=Hello'});

在目标页面，于onLoad生命周期函数中接收参数：

// 在目标页面（/pages/detail/detail.vue）接收参数exportdefault{onLoad(options){// options 是一个对象，包含传递过来的参数console.log(options.id);// 输出：80console.log(options.title);// 输出：'Hello'}}

注意：通过URL传递的参数值会被转换为字符串类型，如有需要（如ID为数字），请在接收后进行类型转换。

2. 返回上一页

使用uni.navigateBack可以返回上一页面或多级页面。

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

🏷️ 实现Tab切换

在 UniApp 中，Tab 切换有两种主要形式：基于原生 TabBar 的切换和自定义顶部标签页切换。

1. 原生TabBar切换（底部导航栏）

这是最标准的方式，通过uni.switchTab实现，体验与原生应用一致。

步骤一：配置 pages.json
首先，需要在pages.json中正确配置tabBar。

{"pages":[{"path":"pages/index/index","style":{"navigationBarTitleText":"首页"}},{"path":"pages/category/category","style":{"navigationBarTitleText":"分类"}},{"path":"pages/cart/cart","style":{"navigationBarTitleText":"购物车"}},{"path":"pages/profile/profile","style":{"navigationBarTitleText":"我的"}}],"tabBar":{"color":"#7A7E83","selectedColor":"#007AFF","backgroundColor":"#F8F8F8","list":[{"pagePath":"pages/index/index","text":"首页","iconPath":"static/tab-home.png","selectedIconPath":"static/tab-home-active.png"},{"pagePath":"pages/category/category","text":"分类","iconPath":"static/tab-cate.png","selectedIconPath":"static/tab-cate-active.png"}]}}

步骤二：使用API跳转
在代码中，使用uni.switchTab进行跳转。

// 从任意非tabbar页面跳转到首页（tabbar页面）uni.switchTab({url:'/pages/index/index'});

重要：uni.switchTab的url不能带参数。

2. 自定义顶部标签页切换

当需要更灵活的样式或顶部标签效果时，可以结合swiper和scroll-view组件自定义。

步骤一：构建模板结构

<template><view><!-- 1. 自定义顶部标签栏 --><scroll-viewscroll-xclass="nav-scroll":scroll-into-view="currentNavId"><viewv-for="(item, index) in navList":key="index":id="'nav'+index":class="['nav-item', currentTab === index ?'active':'']"@click="switchTab(index)">{{ item.text }}</view></scroll-view><!-- 2. 可滑动的页面区域 --><swiper:current="currentTab"@change="onSwiperChange"class="swiper-box"><swiper-itemv-for="(item, index) in navList":key="index"><viewclass="swiper-item"><!-- 第一个标签页的内容 --><textv-if="index === 0">首页内容</text><!-- 第二个标签页的内容 --><textv-if="index === 1">分类内容</text><!-- 可以在这里嵌入子组件 --></view></swiper-item></swiper></view></template>

步骤二：实现逻辑与样式

<script>exportdefault{data(){return{currentTab:0,// 当前选中的标签索引navList:[// 标签列表{text:'首页'},{text:'分类'}]};},methods:{// 点击标签切换switchTab(index){this.currentTab=index;},// 滑动swiper时触发onSwiperChange(e){this.currentTab=e.detail.current;}}};</script><style>.nav-scroll{white-space:nowrap;width:100%;background-color:#f8f8f8;}.nav-item{display:inline-block;padding:20rpx30rpx;font-size:30rpx;}.nav-item.active{color:#007AFF;font-weight:bold;border-bottom:4rpx solid #007AFF;}.swiper-box{height:calc(100vh-80rpx);/* 根据导航栏高度调整 */}.swiper-item{height:100%;padding:20rpx;box-sizing:border-box;}</style>