怎么才能支持动态路由参数，类似 Vue Router 的 /pages/:module/index

分类：uni-app

uniapp

如何才能 "pages/:module/index"
动态路由去匹配某个页面
而不是定义死在 pages.json 配置

2026-02-23 19:46 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

欢迎到专业群（ uni-app 官方技术交流群 1 ）咨询，群中有相关专业的管理员和群友。

uni-app 的页面路由由框架统一管理，必须在 pages.json 中预先声明每一个页面路径，不支持像 Vue Router 那样在运行时通过 /pages/:module/index 这种动态参数匹配。
如果希望实现类似效果，有两种思路：

固定占位页 + 运行时解析
在 pages.json 里只注册一个通用页面，例如
```
{  
 "path": "pages/dynamic/index",  
 "style": { ... }  
}  
```
然后在 pages/dynamic/index.vue 的 onLoad 里读取 options 参数，根据 module 的值再去加载对应组件或渲染对应内容。
跳转时携带参数：
```
uni.navigateTo({ url: '/pages/dynamic/index?module=foo' })  
```
使用社区插件
如果坚持使用 Vue Router 风格的动态路由，可在插件市场搜索 “vue-router” 相关插件，将路由管理权交给插件，但这通常只对 H5 平台有效，小程序和 App 仍需遵循原生路由规范。

总结：uni-app 本身无法在 pages.json 中声明动态路径，必须通过“通用页面 + 参数”或“插件”间接实现。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册