页面跳转

页面

<template>
  <div class="groups"
       id="groups">
           <!-- 导航 -->
          <div class="group-list">
            <div v-for="item in groupList"
                 :key="item.id"
                 :class="`group-menu ${groupId==item.id ? 'select-menu' :''}`">
              <div class="name"
                   @click="selectMenu(item)">
                {{ item.name }}
              </div>
            </div>
          </div>
            <!-- 内容 -->
            <div v-for="(item,index) in  groupList"
                 :key="index"
                 :id="item.key">
           内容信息
     </div>
      </div>
</template>

script

 <script>
export default {
  name: 'groups',
  components: {
    pages,
    groupCard,
  },
  data() {
    return {
      groupList: [
        { name: '第一组', id: '-1', key: 'dyz', orderIndex: 0 },
        { name: '第二组', id: '1', key: 'dez', orderIndex: 10 },
        { name: '第三组', id: '2', key: 'dsz', orderIndex: 20 },
      ],
      groupId: '-1',
    }
  },
  methods: {
  //选择方法
     selectMenu(item) {
      this.groupId = item.id
      const returnEle = document.querySelector('#' + item.key)
      returnEle.scrollIntoView(true)
    },
}
</script>

style

<style scoped  lang="less">
.groups {
  height: 100vh;
  background-color: #f5f7f9;
  overflow: auto;
}
.group-card {
  margin-bottom: 20px;
}
.group-menu {
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 1px solid #e8eaec;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  .group-btn {
    display: flex;
    align-items: center;
    align-content: center;
  }
}
.select-menu {
  color: blue;
}
.group-list {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 10px;
}

进阶版：随着页面滚动变换导航菜单样式

监听页面滚动方法

  methods:{
   handleScroll() {
      //获取滚动时的高度
      let scrollTop = document.querySelector('#groups').scrollTop
      //判断当前页面高度
      this.groupList.map((item) => {
        //导航对应的div的位置
        let nowScroll = document.querySelector('#' + item.key).offsetTop
        //nowScroll-100是为了让滚动留有余地而不是一超过当前导航位置就变换样式
        if (nowScroll-100 <= scrollTop) {
          this.groupId = item.id
        }
      })
    
    },},
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },

销毁滚动

  destroyed() {
    document.removeEventListener('scroll', this.handleScroll)
  },