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

文章目录

前言

博主介绍:✌目前全网粉丝3W+,csdn博客专家、Java领域优质创作者,博客之星、阿里云平台优质作者、专注于Java后端技术领域。

涵盖技术内容:Java后端、大数据、算法、分布式微服务、中间件、前端、运维等。

博主所有博客文件目录索引:博客目录索引(持续更新)

视频平台:b站-Coder长路


背景

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

shell 复制代码
#/index
#/team
#/time

若是此时我们想要实现跨组件来进行锚点定位,如何解决?

一般在页面中我们使用一个id="xxx",来进行标记位置,接着我们则使用一个a标签,href为#xxx,此时就能够完成锚点定位,那么在vue中如何操作呢,Vue中可以使用vue-scrollto库来实现页面中不同组件之间的锚点定位。


操作指南

安装及配置步骤

1、安装vue-scrollto

shell 复制代码
npm install --save vue-scrollto

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

js 复制代码
import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo)

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

html 复制代码
<section id="about">

<section id="honer" class="section-bg">
  
<section id="honer" class="section-bg">

vue组件中使用

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

方式一:标签中使用

shell 复制代码
<li><a v-scroll-to="'#about'">关于我们</a></li>
<li><a v-scroll-to="'#portfolio'">作品</a></li>

方式二:在vue组件中使用js控制

js 复制代码
<li><a class="tab" v-on:click="click1">关于我们</a></li>

methods: {
    click1() {
        console.log(555)
        this.$scrollTo('#contact')
    }
},

参考文章

1\]. [Vue一个页面不同组件之间的锚点定位](https://www.5axxw.com/questions/simple/stzqhi) \[2\]. [Vue路由器:锚链接到页面中的特定位置,例如/路线/#锚点](https://devpress.csdn.net/vue/632aed64357a883f870c76bd.html) *** ** * ** ***

相关推荐
工业甲酰苯胺5 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang5 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止6 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms6 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登6 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in6 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4168 小时前
HTML面试题
前端·html
张可8 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课8 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登9 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js