vue v-for循环点击到对应位置

 1.router页面

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]


const router = new VueRouter({
  mode: "history",
  routes,
 
 
})



export default router

home页面 

<template>
  <div class="home">
    <!-- <router-link :to="{ path: '/about', hash: '#section2' }">跳转到指定位置</router-link> -->
    <div v-for="(item, index) in yemian" :key="index">
      <div @click="tiaozhuan(item)">{{ item.ct }}</div>
    </div>
  </div>
</template>
 
<script>
// @ is an alias to /src

export default {
  name: "HomeView",
  data() {
    return {
      yemian: [
        {
          path: "about",
          ct: "跳转到指定位置1",
          set: "tita",
        },
        {
          path: "about",
          ct: "跳转到指定位置2",
          set: "titb",
        },
      ],
    };
  },
  components: {},
  methods: {
    tiaozhuan(item) {
      this.$router.push({ path: item.path });

      localStorage.setItem("cec", item.set);
      console.log(111);
    },
  },
};
</script>

about页面 

<template>
  <div class="home">
   <div @click="tiaozhuan()">44</div>
   <div id="tita">11</div>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <p>我的我的</p>
   <div id="titb">22</div>
  </div>
</template>
 
<script>
// @ is an alias to /src

export default {
  name: "HomeView",
  data() {
    return {
    
    };
  },
  created() {
    this.$nextTick(() => {
      this.toLocal();
    });
  },
   mounted() {
      // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
      window.addEventListener("scroll", this.handleScroll);
  },
  
  destroyed() {
    localStorage.setItem("cec", "");
  },

  components: {},
  methods: {
    tiaozhuan(item) {
       console.log(111);
    },
      toLocal() {
      //查找存储的锚点id
      let Id = localStorage.getItem("cec");
      console.log(Id);
      let toElement = document.getElementById(Id);
        console.log(toElement);
      //锚点存在跳转
      if (Id) {
        toElement.scrollIntoView();
      }
    },

  },
};
</script>