uniapp中封装底部跳转方法

//跳转底部页面
Vue.prototype.jumpLink = (link) => {
	let arr = ["/pages/index/index", "/pages/mine/mine"];
	if (arr.indexOf(link) > -1) {
		uni.switchTab({
			url: link ||"/pages/index/index"
		});
	} else {
		uni.navigateTo({
			url: link
		});
	}
}

1. 全局挂载方法：Vue.prototype.jumpLink = (link) => { ... }

• Vue.prototype ：Vue 实例的原型对象。在原型上挂载方法后，所有 Vue 组件（包括页面组件）都可以通过 this.jumpLink(link) 直接调用，无需在每个组件中单独定义跳转逻辑（实现 "一次定义，全局使用"）。
• jumpLink：自定义的方法名，语义是 "跳转链接"，便于开发者理解用途。
• (link) => { ... } ：箭头函数形式的方法体，link 是入参，代表 "要跳转的目标页面路径"（如 /pages/goods/detail）。

2. 定义 Tab 页白名单：let arr = ["/pages/index/index", "/pages/mine/mine"];

• 这里的 arr 是一个 "Tab 页面路径数组"，本质是 Tab 页的白名单。
• 项目中配置在 pages.json 的 tabBar 中的页面（即底部导航栏对应的页面，如 "首页""我的"），必须通过 uni.switchTab 跳转，不能用普通跳转 API，因此需要先定义这些页面的路径，用于后续判断。
• 示例中 "/pages/index/index"（首页）、"/pages/mine/mine"（我的）就是典型的 Tab 页路径。

3. 判断跳转类型：if (arr.indexOf(link) > -1) { ... } else { ... }

通过 arr.indexOf(link) > -1 判断 "目标页面路径 link 是否在 Tab 页白名单中"，从而选择不同的跳转 API：

（1）Tab 页跳转：uni.switchTab({ url: link || "/pages/index/index" })

• 触发条件 ：当 link 是白名单中的 Tab 页路径时（如跳转到 "首页"）。
• uni.switchTab ：UniApp 专门用于 "跳转到 TabBar 页面" 的 API，特点是：
  • 会关闭所有非 TabBar 页面，仅保留 TabBar 页面；
  • 不能携带参数（若需传参需用全局变量 / 缓存等方式）。
• url: link || "/pages/index/index" ：
  • 优先使用入参 link 作为跳转路径；
  • 若 link 为空（如调用时没传参），则默认跳转到 /pages/index/index（首页），避免路径错误。

（2）普通页跳转：uni.navigateTo({ url: link })

• 触发条件 ：当 link 不是 Tab 页路径时（如跳转到 "商品详情页""订单页" 等非 Tab 页面）。
• uni.navigateTo ：UniApp 用于 "跳转到普通页面" 的常用 API，特点是：
  • 会保留当前页面（放入页面栈），跳转后点击 "返回" 可回到上一页；
  • 可以通过 URL 携带参数（如 /pages/goods/detail?id=123）。
• url: link ：直接使用入参 link 作为跳转路径（普通页跳转需确保路径正确，且非 Tab 页）。

二、核心作用与优势

1. 统一跳转逻辑，减少重复代码 若不封装这个方法，每个组件跳转时都要手动判断 "是不是 Tab 页"，再选择 switchTab 或 navigateTo，会产生大量重复代码；封装后只需调用 this.jumpLink(link) 即可。

2. 降低错误概率 新手容易混淆 switchTab 和 navigateTo（比如用 navigateTo 跳 Tab 页会报错），通过白名单自动判断，避免因 API 用错导致的跳转失败。

3. 便于维护 若后续项目新增 / 修改 Tab 页，只需修改 arr 数组中的路径，无需修改所有调用跳转的地方，维护成本更低。

三、使用示例（在组件中调用）

在任何 Vue 组件（页面）中，都可以这样调用这个全局跳转方法：

<template>
  <view>
    <!-- 跳转到 Tab 页（首页） -->
    <button @click="this.jumpLink('/pages/index/index')">去首页</button>
    
    <!-- 跳转到 Tab 页（我的） -->
    <button @click="this.jumpLink('/pages/mine/mine')">去我的</button>
    
    <!-- 跳转到普通页（商品详情，带参数） -->
    <button @click="this.jumpLink('/pages/goods/detail?id=123&name=手机')">去商品详情</button>
    
    <!-- 未传参，默认跳首页 -->
    <button @click="this.jumpLink()">默认去首页</button>
  </view>
</template>

四、注意事项

1. Tab 页路径必须与 pages.json 一致 arr 中的路径（如 /pages/index/index）必须和 pages.json 的 tabBar.list[].pagePath 完全一致（包括大小写、斜杠），否则会判断失败，用错跳转 API。

   示例 pages.json 配置：

   {
   "tabBar": {
   "list": [
   { "pagePath": "/pages/index/index", "text": "首页" }, // 必须和 arr 中的路径一致
   { "pagePath": "/pages/mine/mine", "text": "我的" }
   ]
   }
   }

2. 普通页跳转需确保路径存在 调用时传入的 link 必须是 pages.json 中已配置的页面路径，否则会跳转失败（UniApp 会提示 "页面不存在"）。

3. 箭头函数的 this 绑定 这里用箭头函数 (link) => { ... } 定义方法体，是为了确保函数内部的 this 指向 Vue 实例（若用普通函数 function(link) { ... }，需注意 this 指向可能变化，但箭头函数可避免此问题）。

4. 不支持跳转到分包页面的特殊场景 若目标页面是 "分包页面"，需确保路径包含分包根目录（如 /subpkg/pages/xxx/xxx），且 arr 中若包含分包 Tab 页，也需写全路径。