详解Vue项目中实现锚点定位

背景

今天在开发限时练-提分加项目的时候，有一个需要锚点定位的需求，而在vue项目中，使用传统的在a标签的href属性中写id的方法无效，会导致浏览器的地址改变从而跳转到其他页面。

解决

最终参考改问题下的回答实现了效果。

<template>
<div class="score-preview-container">
 <div class="content-box">
 <div class="content-page-box">
  <globalanalysis :id="#anchor-0" />
  <errormerge :id="#anchor-1" />
  <doexercise :id="#anchor-2" />
 </div>
 <div class="nav-button-box">
  <span class="nav-button-fix">
  <div class="nav-button" v-for="(item,index) in buttonarr" :key="index" :class="{active : activebtn == index}" @click="goanchor('#anchor-'+index,index)">{{item}}</div>
  </span>
 </div>
 </div>
</div>
</template>

<script>
import { mapactions } from "vuex";
import globalanalysis from "./components/globalanalysis.vue";
import errormerge from "./components/errormerge.vue";
import doexercise from "./components/doexercise.vue";
export default {
 name: "score-preview",
 components: { globalanalysis, errormerge, doexercise },
 data() {
 return {
  buttonarr: ["整体分析", "错题整理", "提分训练"],
  activebtn: 0
 };
 },
 mounted() {
 this.datainit();
 },
 methods: {
 ...mapactions("v2-score-preview", [
  "fetchclassscoredata",
  "fetchpersonalreportdata",
  "fetcherrorquestiondata",
  "fetchexercisedata"
 ]),
 //初始化
 datainit() {
  this.fetchclassscoredata();
  this.fetchpersonalreportdata();
  this.fetcherrorquestiondata();
  this.fetchexercisedata();
 },
 //锚点跳转
 goanchor(selector, index) {
  this.activebtn = index;
  document.queryselector("#app-root").scrolltop = this.$el.queryselector(selector).offsettop;
 }
 }
};
</script>

另外，文章中的第四种方法，发现使用scrollintoview()方法也能实现锚点定位的效果。

//锚点跳转
goanchor(selector, index) {
 this.activebtn = index;
 this.$el.queryselector(selector).scrollintoview()
}

以上所述是小编给大家介绍的vue项目中实现锚点定位详解整合，希望对大家有所帮助