uView1.8 路由封装 this.$u.route() 源码使用说明

在uView框架中，this.$u.route()是对uni-app原生路由API的统一封装，提供了更简洁的调用方式和路由拦截能力。底层基于uni.navigateTo、uni.switchTab等原生接口。

两种调用方式

简写（默认navigateTo）：

// 无参
this.$u.route('pages/clue/pool')
// 带参 → /pages/clue/detail?id=123
this.$u.route('pages/clue/detail', { id: 123 })

对象配置：

this.$u.route({
  type: 'switchTab',        // 跳转类型
  url: '/pages/client/index',
  params: { key: 'value' }, // 参数
  delta: 1                  // 仅back时有效
})

type参数对照

type	对应API	说明
navigateTo / to	uni.navigateTo	保留当前页，跳新页（默认）
redirectTo / redirect	uni.redirectTo	关当前页，跳新页
switchTab / tab	uni.switchTab	跳tabBar页
reLaunch / launch	uni.reLaunch	关所有页，开指定页
navigateBack / back	uni.navigateBack	返回，delta控制层数

项目里的典型用法

// 普通跳转传参
this.$u.route('pages/clue/detail', { id: val.id })

// tabBar切换（必须用switchTab）
this.$u.route({
  type: 'switchTab',
  url: this.regionList[e].url
})

// 返回上一页
this.$u.route({ type: 'back', delta: 1 })

注意：switchTab不能传参，这是uni-app限制，参数会被忽略。

底层实现

源码位置

uview-ui/libs/function/route.js里定义了一个Router类，最终导出单例方法：

// 简化后的结构
class Router {
  route(options, params) {
    // 处理参数、补全URL、调用对应uni API
  }
}
export default (new Router()).route

挂载链路

在uview-ui/index.js中分三步挂载：

1. import route from './libs/function/route.js' — 导入单例方法

2. const $u = { route, ... } — 放入工具对象

3. Vue.prototype.$u = $u — 挂到Vue原型 → 组件内this.$u.route()

4. uni.$u = $u — 挂到全局uni → 任意位置uni.$u.route()

两种方式等价，组件内用this，其他地方用uni就行。

拦截机制

项目里可以在uni.$u.routeIntercept注入拦截逻辑：

uni.$u.routeIntercept = (to, resolve) => {
  // to: { url, params, type }
  // 登录校验等
  resolve(true)  // 放行
  // resolve(false) // 阻止跳转
}

拦截器收到resolve回调，传true放行，false拦截。

小结

• this.$u.route() 底层是 Router 类的单例方法

• 通过 Vue 原型和全局 uni 对象两层挂载，随处可用

• 支持 type 参数映射五种路由方式，默认 navigateTo

• tabBar 页面必须用 switchTab，且不能传参