router-link 的 @click 需加 .native 才能监听原生点击事件，因其为自定义组件，默认不触发原生 click；优先使用路由守卫（如 beforeeach、beforerouteenter）处理跳转前逻辑，更可靠且避免时机冲突。

router-link 本身是 Vue Router 提供的一个组件，不是原生 HTML 标签，它的根元素虽然最终渲染为 <a></a>，但事件绑定机制和普通标签不同。默认情况下，@click 这类监听的是组件**自定义事件**（即子组件通过 $emit 触发的），而 router-link 并不主动 $emit 原生 click，所以直接写 @click="handler" 不会执行。

必须加 .native 才能监听原生点击

因为 router-link 是封装的 Vue 组件，要让它响应浏览器原生的 click 行为，就得用 .native 修饰符显式声明：

• <router-link to="/home">首页</router-link>
• 对应 methods 中定义 logClick() { console.log('被点了') }
• 这个规则不仅适用于 <router-link></router-link>，所有自定义组件（比如 <my-button></my-button>）想监听其根元素的原生 click，都要加 .native

注意：.native 只作用于组件的根元素

router-link 渲染后默认是一个 <a></a> 标签，@click.native 就是给这个 <a></a> 绑定原生 click。但如果在 router-link 内部再套一层 div 或 span，.native 依然只管最外层的 a，不会穿透到内部元素。

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

• ✅ 正确：直接在 router-link 上加 @click.native
• ❌ 无效：在 router-link 内部的 span 上写 @click，那只是普通 DOM 事件，但 router-link 默认会阻止默认跳转行为，可能造成跳转和逻辑不同步

如果需要跳转前执行逻辑，优先考虑路由守卫

单纯为了“跳转前做点事”，比手动绑 click 更推荐用 Vue Router 的导航守卫：

• beforeEach 全局前置守卫，适合权限校验、埋点统计
• beforeRouteEnter 组件内守卫，适合页面级数据预加载
• 这样逻辑更集中，不依赖模板事件，也避免 .native 和路由跳转时机冲突（比如 handler 中 return false 无法阻止跳转）

别忘了检查基础配置是否到位

事件不生效有时不是修饰符问题，而是路由根本没跑起来：

• 确认 main.js 中已执行 app.use(router)（Vue 3）或 new Vue({ router })（Vue 2）
• 确认模板中存在 <router-view></router-view>，否则页面空白，看起来像“点不动”
• 检查路由路径是否匹配，比如定义了 path: '/user'，却写了 to="/users"