vue-cli jumps to the specified position on the page

The original focus on the public number, the message in the background can be questioned, you can leave a message in the background to the author to answer questions!

/s?__biz=Mzg3NTAzMzAxNA==&mid=2247484254&idx=1&sn=361bbb2113be3eeda3802f0a805c5705&chksm=cec6fb87f9b1729174e3ae66bf9693207386256c964499c098fb8a6cc14b4ba266bc271073a3&token=689492939&lang=zh_CN#rd

Method 1: Handling Route Rolls in Route Guard

mountingvue-router

npm install vue-router

2. Then, configure the Vue Router in your project. e.g., in the src/router/ file

import Vue from 'vue';  
import VueRouter from 'vue-router';  
import Home from '../views/';  
import About from '../views/';  
  
(VueRouter);  
  
const routes = [  
  {  
    path: '/',  
    name: 'Home',  
    component: Home  
  },  
  {  
    path: '/about',  
    name: 'About',  
    component: About  
  }  
];  
  
const router = new VueRouter({  
  mode: 'history',  
  base: .BASE_URL,  
  routes  
});  
  
export default router;

3. Create target components and add target elements
Let's say we want to scroll to a specific position in the component. We can add an element with a unique id attribute to the

<template>  
  <div>  
    <h1>About Page</h1>
    <!-- To demonstrate the scrolling effect，Add Height -->  
    <div style="height: 1000px;"> 
      Scroll down to see the target element.  
    </div>
    <!-- Scroll to target position -->  
    <div >  
      This is the target element.  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'About',  
  mounted() {  
    // Some post component mount logic could be added here, but scrolling is usually handled in the route navigation guards
  }  
};  
</script>  
  
<style scoped>  
/* Add some styles to improve visualization*/  
</style>

4. Handling scrolling in route navigation guards

In order to realizeScroll toTo specify the location, we need to handle the scrolling logic in the route navigation guard. The scrolling behavior can be added in src/router/:

import Vue from 'vue';  
import VueRouter from 'vue-router';  
import Home from '../views/';  
import About from '../views/';  
  
(VueRouter);  
  
const routes = [  
  {  
    path: '/',  
    name: 'Home',  
    component: Home  
  },  
  {  
    path: '/about',  
    name: 'About',  
    component: About,  
    // A meta field can be added to the route configuration to store scrolling information
    meta: {  
      scrollToTarget: true // Mark this route as needing to be scrolled to the target location
    }  
  }  
];  
  
const router = new VueRouter({  
  mode: 'history',  
  base: .BASE_URL,  
  routes,  
  scrollBehavior(to, from, savedPosition) {  
    if () {  
      return new Promise((resolve, reject) => {  
        setTimeout(() => {
        // Get target element
          const targetElement = ('#targetElement');  
          if (targetElement) {
          // Scroll to target position
            ({ behavior: 'smooth' });  
          }  
          resolve();  
        }, 0); // Use setTimeout to make sure the DOM update is complete
      });  
    } else {  
      // Restore previous position or scroll to top if not specifically requested
      return savedPosition || { x: 0, y: 0 };  
    }  
  }  
});  
  
export default router;

5. Trigger route navigation

Finally, trigger route navigation in your or other components:

<template>  
  <div>  
    <h1>Home Page</h1>  
    <button @click="goToAbout">Go to About Page</button>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'Home',  
  methods: {  
    goToAbout() {  
      this.$({ name: 'About' });  
    }  
  }  
};  
</script>

Method 2: Handle scrolling to a specific position on the page

1. Create , Page

2. Before jumping to the page

this.$({
  path: "/about"
});

3. After jumping to the about page, get the distance from the top of the specified element on the about page.

<template>
  <div>
  <!-- To demonstrate the scrolling effect，Add Height -->
    <div style='height:1000px'>div1</div>
    <div id='div2' class='id2'>div2</div>
  </div>  
</template>
<script> 
export default {
  name: "about",
  mounted() {
    this.setScrolltop();
  },
  methods: {
    setScrolltop(){
      let time=setTimeout(()=>{
          this.$nextTick(()=>{
            let top=0;
            let targetElement=("id2");
            if(targetElement){
            // Get the distance of the element from the top
              top=;
            }
            if(top>0){
            // Scroll to the specified position
              ({
                top: top,
                behavior: 'smooth'
              });
            }
            clearTimeout(time);
            time=null;
          })
        },1000);
    }
  }
} 
</script>