wot-router-usage

@wot-ui/router Usage Guide

A lightweight routing library designed for uni-app, providing an API similar to Vue Router.

Core Features

• 📝 Programmatic Navigation
• 🔄 Parameter Passing (params + query)
• 🛡️ Navigation Guards
• 📊 Route Information Retrieval
• 🎯 TypeScript Support

Route Configuration

// src/router/index.ts
import { pages, subPackages } from 'virtual:uni-pages'

function generateRoutes() { const routes = pages.map((page) => ({ ...page, path: /${page.path}, }))

subPackages?.forEach((sub) => { sub.pages.forEach((page) => { routes.push({ ...page, path: /${sub.root}/${page.path}, }) }) })

return routes }

const router = createRouter({ routes: generateRoutes(), })

export default router

## 基础导航

```typescript
const router = useRouter()
const route = useRoute()

// 字符串路径
router.push('/pages/detail/index')

// 对象形式
router.push({ path: '/pages/detail/index' })

// 命名路由
router.push({ name: 'detail' })

// 替换当前页面
router.replace({ name: 'login' })

// 返回上一页
router.back()

// 返回多级
router.go(-2)

Parameter Passing

Query Parameters

// 跳转
router.push({
  name: 'detail',
  query: { id: '123', type: 'product' },
})

// 获取
const route = useRoute()
const id = route.query.id
const type = route.query.type

Params Parameters

// 跳转
router.push({
  name: 'detail',
  params: { id: '123' },
})

// 获取
const route = useRoute()
const id = route.params.id

Navigation Guards

Global Before Guards

router.beforeEach((to, from, next) => {
  console.log(`导航: ${from.path} → ${to.path}`)

  // 权限检查
  if (to.meta?.requiresAuth && !isLoggedIn()) {
    next({ name: 'login' })
    return
  }

  // 异步守卫
  if (to.name === 'protected') {
    return new Promise((resolve) => {
      showConfirm({
        title: '确认访问',
        success: () => { next(); resolve() },
        fail: () => { next(false); resolve() },
      })
    })
  }

  next()
})

Global After Hooks

router.afterEach((to, from) => {
  console.log(`页面切换完成: ${to.path}`)

  // 页面统计
  trackPageView(to.path)
})

Route Information

const route = useRoute()

// 当前路径
route.path        // '/subPages/detail/index'

// 路由名称
route.name        // 'detail'

// 查询参数
route.query       // { id: '123' }

// 路径参数
route.params      // { id: '123' }

// 完整路径
route.fullPath    // '/subPages/detail/index?id=123'

// 路由元信息
route.meta        // { requiresAuth: true }

Page Definition

<script setup lang="ts">
definePage({
  name: 'detail',           // 路由名称
  layout: 'default',        // 布局
  meta: {
    requiresAuth: true,     // 自定义元信息
  },
  style: {
    navigationBarTitleText: '详情',
  },
})
</script>

TabBar Page Navigation

// TabBar 页面使用 reLaunch
router.push({
  name: 'home',
  reLaunch: true,  // 或自动识别 tabBar 页面
})

Notes

• uni-app routing restrictions still exist (such as page stack limits)
• TabBar pages require special handling
• Asynchronous operations in navigation guards need to return a Promise
• Consider using global state for passing when parameters are too long