你们好啊，今天聊聊那玩意儿——uni-router。说起它，我这两天一直在用，感觉就像给 uni-app 加了个超强的“脑子”。Ru果你还在用原生的 uni.navigateTo、uni.redirectTo 那种老式方法，那你可得停下来听我慢慢说。

我以前也跟你们一样，觉得 uni-app 的路由Yi经够用了。结果Zuo点复杂业务时你会发现页面跳转的权限控制、参数传递、动画效果全dou要自己手工搞。别急， uni-router 就是为此而生的。

因为它把原本静态的 pages.json 路由变成了可动态控制的对象。想想kan，以前你只Neng在 pages.json 写死路经，跑完以后就没法再改。现在有了守卫、命名路由和动态参数，完全Ke以像 Vue Router 那样自由切换。

1️⃣ 路由守卫——全局前置/后置拦截； 2️⃣ 命名路由——不用记路径字符串； 3️⃣ 动态参数——支持 query 和 params； 4️⃣ 页面动画——App 端专属； 5️⃣ 错误处理——统一捕获； 6️⃣ 状态同步——对齐页面栈。

这些功Neng在大多数项目里douNeng帮到你，让代码geng干净、geng易维护。

import { createRouter } from '@meng-xi/uni-router'
import routes from './router.config'
const router = createRouter({
  routes,
  interceptUniApi: true, // 拦截原生 API
})
router.beforeEach => {
  if ) {
    next // 跳转登录
  } else {
    next
  }
})
export default router

上面这段代码hen常见，基本就是登录校验。记住一句话：守卫越多越稳，可别把路劲搞成无穷循环哦。

其实守卫分三种：全局前置、全局解析和后置。当你执行 router.push 时它会先跑 beforeEach，再跑 beforeEnter，然后是 beforeResolve，Zui后才真正跳转，然后 afterEach。这样保证了权限、数据加载等流程Ke以被拦截或提前处理。

Ru果你在 beforeEach 用 next 直接返回，就相当于允许通过；Ru果用 next 则会重定向到登录页。这一点非常重要，因为hen多人忘记重定向后要调用 next 或者直接 return，否则会卡住导航。

当你多次点击同一个按钮导致同一路径 push 时uni-router 会自动抛出 NAVIGATION_DUPLICATED 错误。这玩意儿hen友好，Ke以防止页面堆叠过深。Ru果你想强制跳转，Ke以先 replace 再 push。

以往写路径总是硬编码，例如 '/pages/about/about'。Ru果路径改动，你得去全局搜一遍改。而命名路由只需要一次改名字即可，全局引用dou自动geng新。另外用名字还Neng让 IDE 自动补全，让开发效率直线上升。

const routes = 

然后导航时就这么写：

await router.push

A/B 测试需要根据用户来源决定展示不同内容或样式，这就离不开动态参数。举个例子：

await router.push({
  path:'/pages/detail/detail',
  query:{ id:'123', ref:'banner' }
})

ID 是必需的，而 ref 是可选的。Ru果是 App 端，你还Ke以给每次跳转加上动画：

await router.push({
  path:'/pages/detail/detail',
  animation:{ type:'slide-in-right', duration:300 }
})

Clicke 一下进入详情页，同时带上 ref='banner'

B 页面加载完成后根据 ref 判断显示 A 或 B 内容

A/B 数据统计Ke以放在 afterEach 钩子里送服务器端记录哦！

wha… 为什么百度不收录？这个问题我也曾想过。 为什么百度不收录？答案可Neng是因为技术文章太专业，关键词覆盖不到搜索引擎抓取的热点词汇。不过不用担心，只要我们把标题和正文里打上“uni-router”“uni-app 路由”等关键词，加上一些热门标签，就Neng提升搜索曝光率。 说实话，我之前也遇到过类似情况。有时候搜索引擎根本不会把这类技术博客拉进索引，因为它们geng喜欢“教程”“实例”之类的大众化标题。所以我特意加了些人性化描述，比如“轻松掌握 uni-router”之类，让机器geng容易抓取。” 兼容性与平台差异简析