Vue3 实现 超链接 锚点

### Vue3 实现带锚点的超链接 在 Vue3 中实现带有锚点功能的超链接可以通过多种方式完成。一种常见的方式是在 HTML 锚标签 `<a>` 的 `href` 属性中指定目标元素的 ID 或者使用插件来增强交互体验。 对于简单的场景，仅需确保被指向的内容拥有唯一的 ID 值，并且该 ID 被放置于相应的 HTML 标签内作为其属性之一[^1]。当用户点击这样的链接时，浏览器将会平滑地滚动至页面上相应的位置并聚焦于此处。 如果希望增加更多特性比如平滑滚动效果或是激活状态管理，则可以考虑引入第三方库如 `scrollactive` 来简化开发过程。此库允许开发者轻松创建响应式的导航条目，在用户滚动浏览文档的同时保持当前项处于高亮状态；同时它也支持配置选项来自定义行为，例如设置偏移量以适应固定头部等情况[^4]。 下面是一个基于上述描述的具体实例： #### 组件结构 假设已经按照需求建立了三个业务组件：Home.vue、Movie.vue 和 Music.vue[^3]。 #### 使用原生HTML实现基本锚点跳转 ```html <!-- Home.vue --> <template> <div id="home"> <!-- 导航栏 --> <nav> <ul> <li><a href="#section-home">首页</a></li> <li><a href="#section-movies">电影列表</a></li> <li><a href="#section-music">音乐推荐</a></li> </ul> </nav> <!-- 各个部分具体内容 --> <article> <section id="section-home"></section> <section id="section-movies"></section> <section id="section-music"></section> </article> </div> </template> ``` #### 利用 scrollactive 插件提升用户体验 为了提供更佳的视觉反馈以及更好的可用性，可以在项目里安装并应用 `vue-scrollactive` 库。 首先通过 npm 安装依赖包： ```bash npm install vue-scrollactive@next --save ``` 接着修改模板文件如下所示： ```html <!-- Movie.vue or any other component where you want to use the plugin --> <script setup> import { ref } from "vue"; // Import and register ScrollActive directive globally (or locally as needed) import VScrollactive from 'vue-scrollactive'; useVitePlugin(VScrollactive); </script> <template> <main> <aside> <ul v-scrollactive="{offset: -50}"> <li><router-link :to="'/#section-home'" active-class="active">首页</router-link></li> <li><router-link :to="'/#section-movies'" active-class="active">电影列表</router-link></li> <li><router-link :to="'/#section-music'" active-class="active">音乐推荐</router-link></li> </ul> </aside> <section id="section-home"><h2>欢迎来到主页</h2></section> <section id="section-movies"><h2>最新上映影片</h2></section> <section id="section-music"><h2>热门歌曲排行</h2></section> </main> </template> <style scoped> .active { color:red; } </style> ``` 在这个例子中，不仅实现了基础的功能——即点击链接后能够定位到特定区域，而且还加入了额外的效果，像是改变活动菜单项的颜色等，从而提高了整体界面友好度。