Vue Router懒加载未渲染：普通a标签点击事件的解决方案疑问

核心原因 #

你遇到的问题本质是HTML a标签的默认行为干扰了Vue Router的异步路由切换流程：

• 未添加@click.prevent时，点击a标签会先触发浏览器的默认跳转行为（这里href="#"会修改URL hash并将页面滚动到顶部），同时向浏览器history栈添加一条新记录。
• Vue Router的router.push是异步操作（懒加载组件依赖动态import，属于异步过程），浏览器的默认行为会打乱路由切换的状态，导致懒加载组件的异步加载过程被中断，最终路由懒加载失效。

添加@click.prevent后，阻止了a标签的默认跳转行为，router.push能完整执行异步加载组件的流程，路由懒加载自然恢复正常。

补充说明 #

虽然Vue Router官方文档没有专门针对这个场景做单独说明，但这是单页应用中使用原生a标签替代路由组件时的常见注意事项：

• 单页应用的路由切换依赖前端JavaScript逻辑，不需要浏览器的页面跳转/刷新行为，因此使用原生a标签触发路由时，必须阻止其默认行为。
• 官方推荐使用<RouterLink>组件，它内部已经自动处理了阻止默认行为、路由激活状态等逻辑，避免手动处理的潜在问题。

代码验证 #

你的代码中，修改后的a标签：

<li><a href='#' @click.prevent="handleNavMenu('/avaliacao-emp')">Link 1</a></li>

通过@click.prevent阻止默认行为，确保router.push的异步懒加载流程不受干扰。

内容的提问来源于stack exchange，提问作者Andre RB