Vue与iview结合的锚点定位跳转（当前页面跳转，url不变）

当点击菜单栏标题的某一个元素，然后跳转到页面中的某一处。
点击：

跳转：

项目是vue-cli搭建的，菜单栏用的是iView组件实现的。
@on-select：是选择菜单时（即子项目）是触发的。
name：表示每个菜单项的名称，菜单项的唯一标识。

1、给菜单栏绑定一个事件。on-select相当于绑定一个事件，换成其他组件也是一样的。别的可以用@click。根据实际情况；
2、在你点击跳转之后想要到达的详情区域的最外层div上添加一个id;
3、在方法里面写上。本文即在handleSelect(name)函数里面写。
简单版：（抄的）

handleSelect() {  //counter1是绑定的点击事件名称
    const returnEle = document.querySelector("#introduction");  //productId是将要跳转区域的id
    if (!!returnEle) {
        returnEle.scrollIntoView(true); // true 是默认的
    }
        document.querySelector("1").scrollIntoView(true); //这里的counter1是将要返回地方的id
}

整个代码如下：

<template>
  <Layout class="layout">
    <Header>
      <Menu
        mode="horizontal"
        theme="dark"
        active-name="1"
        @on-select="handleSelect"
      >
        <MenuItem name="1"> 简介 </MenuItem>
        <MenuItem name="2"> 历史沿革 </MenuItem>
        <MenuItem name="3"> 行政划区 </MenuItem>
        <MenuItem name="4"> 地理位置 </MenuItem>
        <MenuItem name="5"> 风味饮食 </MenuItem>
      </Menu>
    </Header>
    <Content>
      <div id="introduction" style="background: yellow; height: 300px"></div>
      <div id="history" style="background: gray; height: 300px"></div>
      <div id="administration" style="background: aqua; height: 300px"></div>
      <div id="geography" style="background: cadetblue; height: 300px"></div>
      <div
        id="deliciousfood"
        style="background: green; height: 300px"
      ></div>
    </Content>
  </Layout>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleSelect(name) {
      const returnEle1 = document.querySelector("#introduction"); //productId是将要跳转区域的id
      const returnEle2 = document.querySelector("#history");
      const returnEle3 = document.querySelector("#administration");
      const returnEle4 = document.querySelector("#geography");
      const returnEle5 = document.querySelector("#deliciousfood");
      console.log(name);
      if (name == "1") {
        if (!!returnEle1) {
          returnEle1.scrollIntoView(true); // true 是默认的
        }
        document.querySelector("1").scrollIntoView(true); //这里的counter1是将要返回地方的id
      } else if (name == "2") {
        if (!!returnEle2) {
          returnEle2.scrollIntoView(true); // true 是默认的
        }
        document.querySelector("3").scrollIntoView(true); //这里的counter1是将要返回地方的id
      } else if (name == "3") {
        if (!!returnEle3) {
          returnEle3.scrollIntoView(true); // true 是默认的
        }
        document.querySelector("3").scrollIntoView(true); //这里的counter1是将要返回地方的id
      } else if (name == "4") {
        if (!!returnEle4) {
          returnEle4.scrollIntoView(true); // true 是默认的
        }
        document.querySelector("4").scrollIntoView(true); //这里的counter1是将要返回地方的id
      } else if (name == "5") {
        if (!!returnEle5) {
          returnEle5.scrollIntoView(true); // true 是默认的
        }
        document.querySelector("5").scrollIntoView(true); //这里的counter1是将要返回地方的id
      }
    },
  },
};
</script>

<style scoped>
.ivu-menu {
  width: 1226px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  z-index: 0;
  color: cadetblue;
}
</style>

参考于vue实现锚点定位跳转（当前页面跳转，url不变）