RouterLink H5端控制台错误修复

0 阅读2分钟

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>

<!-- 修复前 -->
<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 别名:

// 重构前
export interface RouterLinkEmits { ... }
export interface TabBarEmits { ... }

// 重构后
export type RouterLinkEmits = { ... }
export type TabBarEmits = { ... }

2. 变更原因

项目中其他类型定义均采用 type 别名风格,interface 风格的 emits 类型与整体风格不一致。改为 type 后:

  • 与其他类型定义风格保持一致
  • 功能无差异(Vue 3 的 emits 类型支持 interfacetype 两种写法)
  • 对使用者无影响(类型名相同,结构相同)

三、升级指南

v2.3.1 完全向后兼容,无破坏性变更,无新增导出,升级后无需修改任何现有代码。

版本兼容性

功能v2.3.0v2.3.1
RouterLink H5 控制台错误存在修复
组件 emits 类型风格interfacetype 别名
所有导航 API支持支持
守卫系统支持支持
组合式 API支持支持
插件系统支持支持