点击网页头部导航跳转到首页指定位置

这是一个企业官网，实现的功能就是在官网的首页点击顶部导航要跳转到指定的首页的位置，在子页面也一样点击顶部导航要跳转到首页的指定位置

首先顶部导航是一个公共组件在每一个子页面上都要显示。

<div>

<!-- 先用for循环，列出导航按钮 -->
            <a
              v-for="item in list"
              :key="item.Id"
              @click="toPath(item.Id)"
              class="Navigation"
              >{{ item.name }}</a
            >
        </div>
        <!-- 绑定id进行定位滚动到指定位置 -->
        <div id="aa">
        
        </div>
         <div id="bb">
        
        </div>
         <div id="cc">
        
        </div>
         <div id="dd">
        
        </div>
<script>


export default {
  name: "TopFormwork",
  props: {
    msg: String,
  },
  data: function () {
    return {
    //list列表
      list: [
        {
          name: "网站首页",//name按钮名称
          Id: "/",//绑定的首页的指定位置的相应id，通过id进行滚动
        },
        {
          name: "xx",
          Id:"aa"
        },
        {
          name: "xx",
          Id:"bb"
        },
        {
          name: "xx",
          Id:"cc"
        },
        {
          name: "xx",
          Id:"dd"
        },
        {
          name: "xx",
          Id:"ee"
        },
        {
          name: "xx",
          Id:"ff"
        },
        
      ],
    };
  },
  methods: {
    toPath(Id) {
      if(Id=="/"){
        this.$router.push({ path:"/"});//因为都是跳转到首页直接重定向到首页就好了
        return;
      }
      this.$router.push({ path:"/"});
            this.$nextTick(()=>{
              var pageId = document.getElementById(Id.toString());
              window.scrollTo(0, pageId.offsetTop)
            })
    },
};
</script>