uni-app - 详细实现 H5 端获取当前页面的路由和参数（得到当前页面地址的路径 URL）

### uni-app 中动态路由的使用方法 在uni-app中，动态路由可以通过编程式导航来实现。对于动态参数传递以及页面跳转的需求，通常会利用`uni.navigateTo()`或者`this.$router.push()`等API函数完成带有参数的页面切换[^1]。 当涉及到更复杂的场景时，比如懒加载、权限校验等功能，则可能需要用到第三方路由库如`uni-simple-router`来进行增强支持。该库提供了钩子函数机制，在每次路由变化前后的不同阶段执行自定义逻辑，从而更好地控制应用内的导航行为[^2]。 #### 编程式导航示例代码 为了展示如何创建一个简单的动态路由，下面给出了一段基于官方推荐方式的例子： ```javascript // 假设目标是向详情页传入id作为查询字符串 const id = 'someId'; uni.navigateTo({ url: `/pages/detail/detail?id=${id}` }); ``` 如果采用的是Vue Router风格的方式（需引入相应插件），则可以这样写： ```javascript import router from '@/common/router' // 引入路由实例 methods:{ gotoDetail(id){ this.$router.push({ path:'/detail',query:{id:id}}) } } ``` 以上两种方法都可以满足基本需求，具体选择取决于项目的实际架构和个人偏好。 #### 动态路由匹配规则设置 另外需要注意的一点是在配置文件`pages.json`里面也需要做相应的调整以适应这些动态路径的存在。例如： ```json { "path": "pages/detail/:id", "style": { "navigationBarTitleText": "Details" } } ``` 这里`:id`表示这是一个可变的部分，它允许任何合法字符通过URL访问对应的资源[^3]。