TDesign锚点组件:解决点击锚点会导致路由跳转的问题
根据官网的示例,锚点组件的应用是这样写的:
<t-anchor> <t-anchor-item href="#进行中任务" title="进行中任务" /> <t-anchor-item href="#待处理任务" title="待处理任务" /> <t-anchor-item href="#待排期任务" title="待排期任务" /> </t-anchor> <div id="进行中任务">进行中</div> <div id="待处理任务">待处理</div> <div id="待排期任务">待排期</div>
但是在哈希路由模式下,点击锚点会直接跳转到 http://localhost:8080/#进行中任务 ,和路由的跳转冲突。所以需要加一段代码来避免路由跳转。
<script setup> setTimeout(() => { document.querySelectorAll('.t-anchor a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ block: "start", inline: "nearest", behavior: 'auto' }); }); }); }, 500); </script>
代码可以加到使用到锚点组件的页面下,也可以加到app.vue里变成全局生效的配置。

浙公网安备 33010602011771号