vue-scrollto实现页面组件锚点定位

前言

博主介绍：✌目前全网粉丝3W+，csdn博客专家、Java领域优质创作者，博客之星、阿里云平台优质作者、专注于Java后端技能领域。
涵盖技能内容：Java后端、大数据、算法、分布式微服务、中心件、前端、运维等。
博主所有博客文件目次索引：博客目次索引(持续更新)
视频平台：b站-Coder长路

---

背景

vue中在hash模式下，页面的动态渲染一般会根据vue-router来进行完成定位，根本不同页面切换如下所示：

1. #/index
2. #/team
3. #/time

复制代码

若是此时我们想要实现跨组件来进行锚点定位，怎样解决？
一般在页面中我们利用一个id=“xxx”，来进行标记位置，接着我们则利用一个a标签，href为#xxx，此时就能够完成锚点定位，那么在vue中怎样操纵呢，Vue中可以利用vue-scrollto库来实现页面中不同组件之间的锚点定位。

---

操纵指南

安装及设置步调

1、安装vue-scrollto

1. npm install --save vue-scrollto

复制代码

2、在main.js中导入vue-scrollto

1. import VueScrollTo from 'vue-scrollto'
2. Vue.use(VueScrollTo)

复制代码

3、此时我们在任何一个标签中设置锚点，指定id=xxx

1. <section id="about">
3. <section id="honer" class="section-bg">
4.   
5. <section id="honer" class="section-bg">

复制代码

---

vue组件中利用

我们封装了一个Header以及index组件，对于顶部的tab栏目是在Header.vue中，而滚动的具体位置则是在index.vue中，此时我们依旧可以借助这个vue-scrollto进行轻松搞定：

方式一：标签中利用

1. <li><a v-scroll-to="'#about'">关于我们</a></li>
2. <li><a v-scroll-to="'#portfolio'">作品</a></li>

复制代码

方式二：在vue组件中利用js控制

1. <li><a class="tab" v-on:click="click1">关于我们</a></li>
3. methods: {
4.     click1() {
5.         console.log(555)
6.         this.$scrollTo('#contact')
7.     }
8. },

复制代码

参考文章

[1]. Vue一个页面不同组件之间的锚点定位
[2]. Vue路由器:锚链接到页面中的特定位置,比方/门路/#锚点

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。