v2.3.1 修复了 RouterLink 组件在 H5 端每次点击时 uni-h5 输出
[ERROR] <navigator/> should have url attribute控制台错误的问题,同时对组件 emits 类型进行了内部优化。
前言
@meng-xi/uni-router 在 v2.3.0 新增了 useLink 组合式 API 和 isNavigationFailure
工具函数。v2.3.1 是一个 patch 版本,主要修复 RouterLink 组件在 H5 端的控制台错误,并对组件类型定义进行内部优化,不涉及新功能或破坏性变更。
一、修复:RouterLink H5 端控制台错误
1. 问题描述
RouterLink 组件根元素使用 <navigator>,但未设置 url 属性(导航由 @click.stop.prevent 拦截后调用路由器 API 完成)。H5 端 uni-h5 的 <navigator> 实现会在每次点击时向控制台输出错误:
[ERROR] <navigator/> should have url attribute when using navigateTo, redirectTo, reLaunch or switchTab
导航本身可以成功,但每次点击都会产生一条控制台错误,污染使用方应用的错误监控。
2. 修复方案
将根元素从 <navigator> 替换为 <view>:
vue
<!-- 修复前 -->
<navigator :hover-class="hoverClass" ... @click.stop.prevent="navigate">
<slot />
</navigator>
<!-- 修复后 -->
<view :hover-class="hoverClass" ... @click.stop="handleClick">
<slot />
</view>
3. 原理分析
<view> 组件同样支持 uni-app 的点击态属性:
| 属性 | 说明 |
|---|---|
hover-class |
按下时的样式类 |
hover-stop-propagation |
是否阻止祖先节点的点击态 |
hover-start-time |
按住后多久出现点击态 |
hover-stay-time |
松开后点击态保留时间 |
<view> 与 <navigator> 的区别在于:
<navigator>是 uni-app 的导航组件,内置了完整的导航逻辑和url校验机制<view>是基础视图容器,没有内置导航逻辑,也没有url校验
实际导航完全由 @click.stop="handleClick" 调用路由器 API 完成,不需要 <navigator> 的内置导航能力。更换为 <view> 后:
- 无
url属性校验 --- uni-h5 不会输出控制台错误 - 无内置导航逻辑 --- 不会触发二次导航
- 点击态效果完整保留 ---
hover-class等属性在<view>上同样生效
4. 事件处理优化
将 @click.stop.prevent="navigate" 改为 @click.stop="handleClick",移除 event.preventDefault() 调用(<view> 没有需要阻止的默认行为),简化事件处理逻辑。
二、优化:组件 emits 类型重构
1. 重构内容
将组件 emits 类型从 interface 改为 type 别名:
typescript
// 重构前
export interface RouterLinkEmits { ... }
export interface TabBarEmits { ... }
// 重构后
export type RouterLinkEmits = { ... }
export type TabBarEmits = { ... }
2. 变更原因
项目中其他类型定义均采用 type 别名风格,interface 风格的 emits 类型与整体风格不一致。改为 type 后:
- 与其他类型定义风格保持一致
- 功能无差异(Vue 3 的 emits 类型支持
interface和type两种写法) - 对使用者无影响(类型名相同,结构相同)
三、升级指南
v2.3.1 完全向后兼容,无破坏性变更,无新增导出,升级后无需修改任何现有代码。
版本兼容性
| 功能 | v2.3.0 | v2.3.1 |
|---|---|---|
| RouterLink H5 控制台错误 | 存在 | 修复 |
| 组件 emits 类型风格 | interface |
type 别名 |
| 所有导航 API | 支持 | 支持 |
| 守卫系统 | 支持 | 支持 |
| 组合式 API | 支持 | 支持 |
| 插件系统 | 支持 | 支持 |