vue-cli 跳轉到頁面指定位置

白墨阳發表於2024-10-25
Vue

原文關注公眾號，後臺裡留言可進行提問，可在後臺留言向作者提問解答問題!

https://mp.weixin.qq.com/s?__biz=Mzg3NTAzMzAxNA==&mid=2247484254&idx=1&sn=361bbb2113be3eeda3802f0a805c5705&chksm=cec6fb87f9b1729174e3ae66bf9693207386256c964499c098fb8a6cc14b4ba266bc271073a3&token=689492939&lang=zh_CN#rd

vue-cli 跳轉到頁面指定位置

方法1：在路由守衛中處理路由滾動

安裝vue-router

npm install vue-router

2. 然後，在你的專案中配置 Vue Router。例如，在 src/router/index.js 檔案中

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

3.建立目標元件並新增目標元素
假設我們想在 About.vue 元件中滾動到某個特定的位置。我們可以在 About.vue 中新增一個具有唯一 id屬性的元素

<template>  
  <div>  
    <h1>About Page</h1>
    <!-- 為了演示滾動效果，新增高度 -->  
    <div style="height: 1000px;"> 
      Scroll down to see the target element.  
    </div>
    <!-- 滾動到目標位置 -->  
    <div id="targetElement">  
      This is the target element.  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'About',  
  mounted() {  
    // 這裡可以新增一些元件掛載後的邏輯，但滾動通常是在路由導航守衛中處理  
  }  
};  
</script>  
  
<style scoped>  
/* 新增一些樣式以改善視覺效果 */  
</style>

4.在路由導航守衛中處理滾動

為了實現滾動到指定位置，我們需要在路由導航守衛中處理滾動邏輯。可以在 src/router/index.js 中新增滾動行為：

import Vue from 'vue';  
import VueRouter from 'vue-router';  
import Home from '../views/Home.vue';  
import About from '../views/About.vue';  
  
Vue.use(VueRouter);  
  
const routes = [  
  {  
    path: '/',  
    name: 'Home',  
    component: Home  
  },  
  {  
    path: '/about',  
    name: 'About',  
    component: About,  
    // 可以在路由配置中新增 meta 欄位來儲存滾動資訊  
    meta: {  
      scrollToTarget: true // 標記該路由需要滾動到目標位置  
    }  
  }  
];  
  
const router = new VueRouter({  
  mode: 'history',  
  base: process.env.BASE_URL,  
  routes,  
  scrollBehavior(to, from, savedPosition) {  
    if (to.meta.scrollToTarget) {  
      return new Promise((resolve, reject) => {  
        setTimeout(() => {
        // 獲取目標元素
          const targetElement = document.querySelector('#targetElement');  
          if (targetElement) {
          // 滾動到目標位置  
            targetElement.scrollIntoView({ behavior: 'smooth' });  
          }  
          resolve();  
        }, 0); // 使用 setTimeout 確保 DOM 更新完成  
      });  
    } else {  
      // 如果沒有特定要求，則恢復之前的位置或滾動到頂部  
      return savedPosition || { x: 0, y: 0 };  
    }  
  }  
});  
  
export default router;

5.觸發路由導航

最後，在你的 Home.vue 或其他元件中觸發路由導航：

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

方法2： 在頁面中處理滾動至指定位置

1. 建立 home.vue , about.vue 頁面

2. 在home.vue跳轉到about.vue頁面

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

3. 跳轉到about頁面後，在about頁面獲取指定元素距離頂部的距離

<template>
  <div>
  <!-- 為了演示滾動效果，新增高度 -->
    <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=document.getElementById("id2");
            if(targetElement){
            // 獲取元素距離頂部的距離
              top=targetElement.offsetTop;
            }
            if(top>0){
            // 滾動到指定位置
              window.scrollTo({
                top: top,
                behavior: 'smooth'
              });
            }
            clearTimeout(time);
            time=null;
          })
        },1000);
    }
  }
} 
</script>

相關文章