背景

今天在開發限時練-提分加專案的時候，有一個需要錨點定位的需求，而在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()
}