Loading...
Loading...
@wot-ui/router 轻量级路由库使用指南
npx skill4agent add wot-ui/wot-starter wot-router-usage// 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 routerconst 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)// 跳转
router.push({
name: 'detail',
query: { id: '123', type: 'product' },
})
// 获取
const route = useRoute()
const id = route.query.id
const type = route.query.type// 跳转
router.push({
name: 'detail',
params: { id: '123' },
})
// 获取
const route = useRoute()
const id = route.params.idrouter.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()
})router.afterEach((to, from) => {
console.log(`页面切换完成: ${to.path}`)
// 页面统计
trackPageView(to.path)
})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 }<script setup lang="ts">
definePage({
name: 'detail', // 路由名称
layout: 'default', // 布局
meta: {
requiresAuth: true, // 自定义元信息
},
style: {
navigationBarTitleText: '详情',
},
})
</script>// TabBar 页面使用 reLaunch
router.push({
name: 'home',
reLaunch: true, // 或自动识别 tabBar 页面
})