导航系统指南

本文档介绍项目中的导航系统使用方法。

useGo Hook（推荐）

useGo 是增强的导航 Hook，提供自动路径补全和便捷方法。

基础用法

import { useGo } from '@/hooks/useGo'

const go = useGo()

// 导航到页面
go('/pages/detail/index')

// 带参数导航（例如产品 ID）
go('/pages/product-detail/index', { id: 123 })

// 带多个参数导航
go('/pages/material-list/index', { category: 'insurance', page: 1 })

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

路径自动补全

useGo 会自动补全相对路径为绝对路径：

go('detail')           // → /pages/detail/index
go('product-detail')   // → /pages/product-detail/index

返回导航

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

// 返回多页
go.back(2)

// 返回首页
go('/pages/index/index')

在目标页面接收参数

import { useLoad } from '@tarojs/taro'
import { ref } from 'vue'

const productId = ref(null)

useLoad((options) => {
  // 访问导航参数
  console.log('接收到的参数：', options)
  productId.value = options.id

  // 根据参数获取数据
  fetchProductDetail(options.id)
})

Taro 内置导航（备选方案）

如果需要更底层的控制，可以直接使用 Taro 导航 API：

navigateTo - 保留当前页

import Taro from '@tarojs/taro'

Taro.navigateTo({
  url: '/pages/detail/index?id=123'
})

redirectTo - 不保留当前页

Taro.redirectTo({
  url: '/pages/login/index'
})

switchTab - 切换 Tab

Taro.switchTab({
  url: '/pages/index/index'
})

reLaunch - 重启应用

Taro.reLaunch({
  url: '/pages/index/index'
})

navigateBack - 返回

// 返回上一页
Taro.navigateBack()

// 返回多页
Taro.navigateBack({ delta: 2 })

路由状态管理

router Store

项目使用 src/stores/router.js 维护已访问路由的栈，主要用于认证回调导航。

import { useRouterStore } from '@/stores/router'

const routerStore = useRouterStore()

// 获取上一页路径
const previousPage = routerStore.previousRoute

导航钩子

import { useLoad, useShow, useHide, useUnload } from '@tarojs/taro'

// 页面加载时（只执行一次）
useLoad((options) => {
  console.log('页面加载', options)
})

// 页面显示时（每次返回都会执行）
useShow(() => {
  console.log('页面显示')
})

// 页面隐藏时
useHide(() => {
  console.log('页面隐藏')
})

// 页面卸载时
useUnload(() => {
  console.log('页面卸载')
})

认证场景导航

登录后返回原页面

import { useGo } from '@/hooks/useGo'
import { useRouterStore } from '@/stores/router'

const go = useGo()
const routerStore = useRouterStore()

// 1. 保存当前路径
routerStore.setRedirect('/pages/some-page/index')

// 2. 跳转登录页
go('/pages/login/index')

// 3. 登录成功后返回
const redirectUrl = routerStore.redirect
if (redirectUrl) {
  go(redirectUrl)
  routerStore.setRedirect(null)
}

常见问题

Q: 导航后页面不刷新？

A: 使用 useShow 钩子，每次页面显示时都会执行：

useShow(() => {
  // 重新加载数据
  fetchData()
})

Q: 参数传递丢失？

A: 确保参数类型正确：

// ❌ 错误：对象作为参数
go('/pages/detail/index', { data: { id: 1 } })

// ✅ 正确：扁平参数
go('/pages/detail/index', { id: 1, type: 'insurance' })

Q: 如何清除页面栈？

A: 使用 redirectTo 或 reLaunch：

// 不保留当前页
Taro.redirectTo({ url: '/pages/login/index' })

// 清空所有页面栈
Taro.reLaunch({ url: '/pages/index/index' })

参考文档

• Taro 导航文档 - 官方文档
• 页面开发指南 - 页面创建和路由注册