mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-10-05 01:20:07 +00:00
75 lines
2.2 KiB
Markdown
75 lines
2.2 KiB
Markdown
---
|
|
title: 路由
|
|
iframe: true
|
|
iframeFormatter: subPages/router/index
|
|
---
|
|
|
|
# 路由管理
|
|
|
|
[uni-app](https://uniapp.dcloud.net.cn/tutorial/page.html#%E8%B7%AF%E7%94%B1) 页面路由为框架统一管理，开发者需要在 `pages.json` 里配置每个路由页面的路径及页面样式。类似小程序在 `app.json` 中配置页面路由一样。所以 `uni-app` 的路由用法与 `Vue Router` 不同，不过我们可以引入类似插件实现类似 `Vue Router` 的开发体验，例如 `@wot-ui/router`。
|
|
|
|
[@wot-ui/router](https://my-uni.wot-ui.cn/) 是专为 uni-app 设计的轻量级路由库，它提供了类似`Vue Router`的API和功能，可以帮助开发者实现在uni-app中进行路由跳转、传参、拦截等常用操作。
|
|
|
|
:::tip 提示
|
|
`@wot-ui/router`的目标是基于小程序平台，将uni-app路由相关的API对齐Vue Router，而并非提供完全的Vue Router，`uni-app` [路由](https://uniapp.dcloud.net.cn/api/router.html)中存在的限制，使用`@wot-ui/router`仍将存在。
|
|
:::
|
|
|
|
## 核心特性
|
|
|
|
- **📝 编程式导航**: 支持多种导航方式
|
|
- **🔄 参数传递**: 支持 params 和 query 参数
|
|
- **🛡️ 导航守卫**: 完整的导航守卫机制
|
|
- **📊 路由信息**: 获取当前路由状态
|
|
- **🎯 类型安全**: 完整的 TypeScript 支持
|
|
|
|
#### 基础用法
|
|
|
|
```typescript
|
|
// 获取路由实例
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
// 字符串路径跳转
|
|
router.push('/pages/detail/index')
|
|
|
|
// 对象路径跳转
|
|
router.push({ path: '/pages/detail/index' })
|
|
|
|
// 命名路由跳转
|
|
router.push({ name: 'detail' })
|
|
|
|
// 带参数跳转
|
|
router.push({
|
|
name: 'detail',
|
|
params: { id: '123' }
|
|
})
|
|
|
|
// 带查询参数跳转
|
|
router.push({
|
|
path: '/pages/detail/index',
|
|
query: { tab: 'info' }
|
|
})
|
|
```
|
|
|
|
#### 导航守卫
|
|
|
|
```typescript
|
|
// 全局前置守卫
|
|
router.beforeEach((to, from, next) => {
|
|
// 检查用户权限
|
|
if (to.meta.requiresAuth && !isLoggedIn()) {
|
|
next({ name: 'login' })
|
|
} else {
|
|
next()
|
|
}
|
|
})
|
|
|
|
// 全局后置钩子
|
|
router.afterEach((to, from) => {
|
|
// 页面跳转完成后的处理
|
|
console.log(`从 ${from.path} 跳转到 ${to.path}`)
|
|
})
|
|
```
|
|
|
|
> 📖 **了解更多**: [@wot-ui/router 文档](https://my-uni.wot-ui.cn/)
|