uniapp 点击页面跳转
时间: 2025-01-03 13:41:17 浏览: 81
### 实现点击事件触发页面跳转
在 UniApp 中实现点击事件触发页面跳转可以通过 `navigator` 组件或编程方式使用 `uni.navigateTo()` 方法来完成。下面展示两种方法的具体应用。
#### 使用 Navigator 组件
通过 `<navigator>` 标签可以直接设置目标页面 URL 和传递参数,适用于简单的页面间导航需求。
```html
<!-- HTML -->
<navigator url="/pages/targetPage/targetPage?param=value">前往目标页面</navigator>
```
此代码片段创建了一个链接按钮,当用户点击该区域时会自动跳转到 `/pages/targetPage/targetPage` 页面并附带查询字符串参数 `param=value`[^1]。
#### 编程式导航
对于更复杂的场景,则推荐采用 JavaScript 进行编程式的路由控制。这种方式提供了更大的灵活性,允许动态构建跳转地址以及处理更多逻辑操作。
```javascript
// JS
methods: {
navigateToDetail(goodsId) {
uni.navigateTo({
url: '/pages/detail/detail?goods_id=' + goodsId,
events: {
// 用于监听被打开页面发送到当前页面的数据变化,
// 并且可以调用返回数据给被打开页面
acceptDataFromOpenedPage: function (data) {},
someEvent: function (data) {}
},
success: function (res) {
// 跳转成功后的回调函数
res.eventChannel.emit('acceptDataFromInvoker', { data: '这是来自调用者的初始数据' });
}
})
}
}
```
上述例子展示了如何利用 `navigateTo` API 来发起一次带有参数的页面切换请求,并设置了成功的回调以便于进一步交互[^3]。
阅读全文
相关推荐


















