uniapp a标签如何使用

在uniapp中如何使用a标签进行页面跳转？我尝试直接写HTML的但无法正常跳转，是否需要引入特殊组件或配置？官方文档提到的navigator组件和a标签有什么区别？求具体用法示例和注意事项。

2 回复

在uni-app中，使用<navigator>标签代替<a>标签进行页面跳转。例如：<navigator url="/pages/home/home">跳转</navigator>。注意设置open-type等属性控制跳转方式。


在 UniApp 中，没有直接的 <a> 标签，但可以通过以下方式实现类似功能：

1. 使用 <navigator> 组件（推荐）

用于页面跳转，支持相对路径和绝对路径：

<navigator url="/pages/index/index">跳转到首页</navigator>
<navigator url="../log/log">跳转到日志页</navigator>

2. 使用 API 跳转

在 JavaScript 中调用路由 API：

// 保留当前页面，跳转到新页面
uni.navigateTo({
  url: '/pages/detail/detail'
});

// 关闭当前页面，跳转到新页面
uni.redirectTo({
  url: '/pages/login/login'
});

// 跳转到 TabBar 页面
uni.switchTab({
  url: '/pages/home/home'
});

3. 外链跳转

使用 web-view 组件或 API 打开外部链接：

<!-- 内嵌网页 -->
<web-view src="https://www.example.com"></web-view>

或

// 打开外部浏览器
uni.navigateTo({
  url: '/pages/webview/webview?url=' + encodeURIComponent('https://example.com')
});

注意事项：

  • 路径需在 pages.json 中预先配置
  • 跳转 TabBar 页面必须使用 switchTab
  • 网络地址需配置合法域名白名单

根据具体需求选择合适的实现方式即可。

回到顶部