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

<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>

//锚点跳转goAnchor(selector, index) { this.activeBtn = index; this.$el.querySelector(selector).scrollIntoView()}